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>