权限验证是Frontier后台管理系统的核心部分。每个登录用户都有对应的角色，每个角色都有对应的权限。比如普通用户只有查看权限，管理员用户有编辑权限，所以不同的用户角色登录后，看到的页面菜单是不一样的。今天我们就来说说Vue-Router是如何配合后台权限管理系统实现的。后台管理系统的具体实现其实实现起来还是比较简单的。主要是借助Vue-Router的两个api1，addRoutes通过router.addRoutes动态挂载路由信息，用户登录成功后，后台会返回当前用户的权限菜单//登录成功后，后台会返回权限数据如下constmenuList=[{//菜单名称:'文章管理',//是否为菜单，true,false为页面isFolder:true,//图标icon:'文章',//是否不在导航栏显示，false表示显示hidden:false,//路由urlurl:'/article',//子菜单menuList:[{//菜单名name:'文章编辑',//是否是一个menu，true是，false是页面isFolder:false,//图标icon:'edit',//是否不显示在导航栏中，false表示显示隐藏:false,//路由urlurl:'/article/edit',//子菜单menuList:[],}]},{name:'UserManagement',isFolder:false,icon:'user',hidden:false,url:'/user/manage',menuList:[],}]//我们需要的数据根据??Vue-Router//转换上面后台返回的数据constroutes=[{//路由路径path:'/article',//如果是菜单，则参考一般布局模板组件:()=>import('@/views/layout.vue'),meta:{//图标icon:'article',//菜单名title:'文章管理',//是否导航Columnhiddenhidden:false,},children:[{//这是页面路由路径:'/article/edit',name:'article/edit',//具体页面组件component:()=>import('@/views/article/edit.vue'),meta:{//图标icon:'edit',//页面名称title:'文章编辑',//导航栏是否隐藏hidden:false,},}],},{路径:'/article/edit',名称:'article/edit',组件:()=>import('@/views/article/edit.vue'),meta:{icon:'edit',title:'文章编辑',hidden:false,},},]//初始路由配置constinitRoutes=[{path:'/login',name:'Login',component:()=>import('@/views/login'),meta:{icon:'',title:'login',hidden:true,},},]//登录成功后//然后动态生成路由信息和路由登录页面拼接在一起//到生成最终的路由信息??router.addRoutes(initRoutes.concat(routes))//最后通过router.push(url)//跳转到动态生成的第一个路由页面//至于页面里面的按钮根据用户角色显示和隐藏。比如普通用户是看不到页面上的“编辑”按钮的。其实就是在用户登录成功后，让后台返回当前用户的角色信息，保存到Vuex中，比如返回['user']代表普通用户，返回['manage']代表管理员，返回['user','mange']代表一个管理员的权限和一个普通用户的权限，然后我们在页面中可以根据这个值来决定是否显示对应的按钮2.beforeEach使用router.beforeEach导航守卫来控制没有登录的用户，只能先到登录页面登录。如果已经登陆过，那么会直接进入对应的页面//这里可以放一些不需要权限验证的菜单constNoAuthUrlList=['/500','/demo',]router.beforeEach((to,from,next)=>{if(NoAuthUrlList.includes(to.path)){//如果不需要权限验证，直接进入页面next()}else{//如果需要权限验证(!store.getters.token){//没有token表示不登录//直接进入登录页面next('/login')}else{//有token//直接进入登录页面next()}}})，Vue-Router做权限校验管理就这样了
