1. 頁面路由權限的設置(基於路由守衛):新建router/router.js和router/index.js路由文件。
//router/router.js文件
import Admin from '@/views/Admin.vue'
export default [
{
path:"/",
redirect:"/admin"
},{
path:"/admin",
name:"admin",
component:Admin
}
]
//router/index.js文件代碼
import Vue from 'vue'
import Router from 'vue-router'
import routes from "./router.js"
import {getCookie,setCookie} from "@/api/cookieApi.js"
Vue.use(Router)
const router=new Router({
routes
})
router.beforeEach((to, from, next) => { //導航守衛,即沒有登錄的情況下,不允許跳轉到admin頁面
var arr=getCookie("userJurisdiction");//登錄成功時,後端返回該用戶的功能和頁面權限,如['page.admin','page.order','func.changeUpwd'],page.是頁面權限,func.是功能權限。
if(to.name !="login"){
var token=getCookie("token"); //是否登錄的判斷,可以有cookie中是否有登錄信息決定
if(token){
if(arr){
arr=JSON.parse(arr);
if(arr.indexOf(to.path) > -1){//,如果要跳轉的頁面,在改用戶返回的權限頁面中,則跳轉改用戶權限頁面
next()
}else{ //否則不跳轉,或者跳轉404頁面
next({path:""})
}
}
}else{
if(to.name==="login"){
next()
}else{
next({name:'login'})
}
}
}
})
export default router
2.頁面功能在不同權限下是否顯示該功能的設置:
<tempalte>
<button @click='click' v-if='isShow'>修改密碼</button>
</tempalte>
<script>
import {getCookie,setCookie} from "@/api/cookieApi.js"
export default{
computed:{
isShow(){
var arr=getCookie("userJurisdiction");
if(arr.indexOf('func.changeUpwd') > -1){
return true
}else {
return false
}
}
}
}
</script>
<style scope>
</style>