vue路由实现权限管理,vue动态路由实现权限控制
后台管理系统中经常使用路由控制来限制不同业务人员的访问。本文主要介绍了两种Vue路由权限控制，具有一定的参考价值。有兴趣的可以看看。
目录
方法一：路由元信息(meta)方法二：动态生成路由表(addRoutes)路由权限控制常用于后台管理系统，限制不同业务人员可以访问的页面的权限。
对于没有权限的页面，可以跳转到404页或者提示没有权限。
方式一：路由元信息（meta）
把所有的页面都放在路由表里，访问的时候只要判断角色权限就可以了。
Vue-router在构建路由时提供元信息元配置接口。我们可以在元信息中添加路由对应的权限，然后在路由卫士中检查相关权限，控制其路由跳转。
在元属性中，将可以访问路由的角色添加到角色中。每次登录后，都会返回用户的角色。然后，在访问页面时，将路由的元属性与用户的角色进行比较。如果用户的角色在路由的角色中，那么它可以被访问，如果不是，那么它将被拒绝。
示例1:根据角色判断
const myRouter=new VueRouter({
路线：[{
路径：“/login”，
名称：登录，
元：{
角色：[管理员，用户]
},
component:()=import( @/components/log in )
},{
路径：“/home”，
姓名：家，
元：{
角色：[admin]
},
组件：()=导入( @/views/Home )
},{
路径：“/404”，
组件：()=导入( @/组件/404 )
}]
})
//假设通过接口从后台获取的用户角色可以存储在token中。
常量角色=用户
myRouter.beforeEach((收件人，发件人，下一个)={
if(to . meta . roles . includes(role)){
Next() //释放
}否则{
Next({path:/404}) //跳到第404页
}
})
示例2:向需要权限的元添加一个ID。
const myRouter=new VueRouter({
路线：[{
路径：“/login”，
名称：登录，
元：{
标题：“登录页面”
图标：“登录”
},
component:()=import( @/components/log in )
},{
路径：“/home”，
姓名：家，
元：{
标题：“主页”
图标：“主页”，
要求验证：真
},
组件：()=导入( @/views/Home )
},{
路径：“/404”，
组件：()=导入( @/组件/404 )
}]
})
myRouter.beforeEach((收件人，发件人，下一个)={
let flag=to . matched . some(record=record . meta . require auth)；
//这里用matched循环找到不直接用to.meta的原因：
//当存在子路由时，首先按照正常的点击逻辑，明确一级路由之后是二级路由，权限的判断必须一致。
//to.meta=直接搜索子路由的meta。如果一级路由没有添加requireAuth:true，那么一级路由的页面应该已经被屏蔽，无法进入二级路由的页面。如果用户直接篡改网址地址栏就可以进入二级页面，权限可能有问题。那么这个权限下的所有路由都要做标记。
//to.matched=matched是一个路由数组，它将集合所有路由的属性，包括子路由。所以通过循环判断查找的方式，你只需要给一级路由加上权限标识，就可以授权它下面的其他子路由了。
如果(标志){
下一个()
}否则{
下一步({路径：/404})
}
})
缺点：检查每一个路由跳转都是浪费计算资源。另外，用户无权接入的线路，理论上不应该挂载。
方式二：动态生成路由表（addRoutes）
通过根据用户权限或用户属性动态添加菜单和路由表，可以定制用户的功能。
Vue-router提供了addRoutes()方法，可以动态注册路由。需要注意的是，动态添加路由是在路由表中推送路由。由于路由是按顺序匹配的，所以有必要将404页这样的路由放在动态添加的末尾。
//store.js
//将需要动态注册的路由提取到vuex中
const dynamicRoutes=[
{
路径：“/管理”，
名称：管理，
元：{
要求验证：真
},
组件：()=导入(。/查看/管理’)
},
{
路径：“/userCenter”，
名称：“用户中心”，
元：{
要求验证：真
},
组件：()=导入(。/views/user center’)
}
]
在vuex中添加userRoutes数组来存储用户定制的菜单。根据后端返回的菜单生成setUserInfo中用户的路由表。
//store.js
setUserInfo (state，userInfo) {
state.userInfo=用户信息
State.auth=true //获取用户信息后，将auth标记为true。当然也可以直接判断userInfo。
//生成用户路由表
state . user routes=dynamic routes . filter(route={
返回userinfo . menus . some(menu=menu . name===route . name)
})
router . add routes(state . user routes)//注册路由
}
修改菜单呈现
//App.vue
div id=nav
路由器链接到=/主页/路由器链接
Router-link to=/login 登录/router-link
模板v-for=store . state . userinfo . menus 的(menu，index)
router-link:to= { name:menu . name } :key= index { menu . title } }/router-link
/模板
/div
关于Vue实现两种路由权限控制方法的文章到此为止。更多相关Vue路由权限控制内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。