vuerouter权限管理(vuerouter登录权限判断)

权限验证是前端后台管理系统中的一个核心内容。每个登录用户都有相应的角色，每个角色都有相应的权限。比如普通用户只有查看权限，而管理员用户有编辑权限，所以不同的用户角色登录后可以看到不同的页面菜单。

今天就来说说Vue-Router在后台权限管理系统中是如何实现的。

后台管理系统

其实实现比较简单，主要是借助Vue-Router的两个API。

1、添加路由

路由信息通过router.addRoutes动态挂载，用户成功登录后，后台会返回当前用户的权限菜单。

//成功登录后，后台返回权限数据如下const menu =[{/menu namename:'文章管理'，/是否为菜单，true yes，false page 。// icon icon:'文章'，/是否不在导航栏显示，false表示隐藏:false，/路由URLURL:'/文章'，//子菜单menu list:[{/菜单名名称:'文章编辑器'，//是不是菜单，true是，false是页面 isfolder:是 URL:'/user/manage '，[/}]/我们根据Vue-Router需要的数据转换后台返回的数据construtes =[{/routing pathpath。 import ('@/views/layout.vue ')， meta: {/icon icon:'文章'，/menu name title:'文章管理'，[/ children: [{//这是页面路由path:'/文章/编辑'， name:'文章/编辑'，//特定页面组件组件导入(' @/views/文章/}]，}，{path: '/article/edit '，name: 'article/edit '，component:()= gt；import(' @/views/article/edit . vue ')， meta: { icon:' edit '， title:'文章编辑'， hidden: false，}，]/初始路由配置为const init routes ={path:'/log in '， name:' login '，import(' @/views/import

至于页面内部的按钮，是根据用户的角色来显示和隐藏的。比如普通用户看不到页面的“编辑”按钮。

其实我们可以在用户登录成功后，要求后台将当前用户的角色信息返回给Vuex，比如普通用户返回['user']，管理员返回['manage']，管理员权限和普通用户权限都返回['user '，' manage']，然后我们就可以根据这个值来决定是否在页面上显示相应的按钮。

2、每次之前

通过router.beforeEach，导航卫士，未登录的用户永远只能先登录页面登录。如果他们已经登录，可以直接进入相应的页面。

//这里可以放一些菜单const no authurlist =['/500 '，'/demo '，]router . before each((to，from，from {if (no authurlist。包括(至。path)){//如果不需要权限验证，直接进入页面Next()} Else {/如果需要权限验证store . getters . token){//无令牌表示从未登录//直接进入登录页面Next('/log in ')} Else {/有令牌/

好了，Vue-Router做权限验证管理到此为止。

如果觉得效果不错，请帮忙加个关注点和赞，经常分享前端实用开发技巧。