vue實現後臺管理系統頁面功能和頁面路由許可權的控制

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>

 

新增小程式，兌換各種視訊教程/資料資源。