Vue 权限控制的两种方法(路由验证)

2023-08-17 13:29:04 67

下面介绍两种权限控制的方法：

路由元信息(meta)
动态加载菜单和路由(addRoutes)

路由元信息(meta)

如果一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的

这个时候我们就可以把所有的页面都放在路由表里，只要在访问的时候判断一下角色权限。如果有权限就让访问，没有权限的话就拒绝访问，跳转到404页面

vue-router在构建路由时提供了元信息 meta配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。

可以在每一个路由的 meta属性里，将能访问该路由的角色添加到 roles里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta属性和用户的角色进行对比，如果用户的角色在路由的 roles里，那就是能访问，如果不在就拒绝访问。

代码示例1：

路由信息：

routes:[
{
path:'/login',
name:'login',
meta:{
roles:['admin','user']
},
component:()=>import('../components/Login.vue')
},
{
path:'home',
name:'home',
meta:{
roles:['admin']
},
component:()=>import('../views/Home.vue')
},
]

页面控制：

//假设有两种角色：admin和user
//从后台获取的用户角色
constrole='user'
//当进入一个页面是会触发导航守卫router.beforeEach事件
router.beforeEach((to,from,next)=>{
if(to.meta.roles.includes(role)){
next()//放行
}esle{
next({path:"/404"})//跳到404页面
}
})

代码示例2

当然也可以用下面的一种方法：

//router.js
//路由表元信息
[
{
path:'',
redirect:'/home'
},
{
path:'/home',
meta:{
title:'Home',
icon:'home'
}
},
{
path:'/userCenter',
meta:{
title:'个人中心',
requireAuth:true//在需要登录的路由的meta中添加响应的权限标识
}
}
]

//在守卫中访问元信息
functiongaurd(to,from,next){
//to.matched.some(record=>record.meta.requireAuth)
//可在此处
}

可以在多个路由下面添加这个权限标识，达到控制的目的

只要一切换页面，就需要看有没有这个权限，所以可以在最大的路由下 main.js中配置

存储信息

一般的，用户登录后会在本地存储用户的认证信息，可以用 token、 cookie等,这里我们用 token。

将用户的 token保存到 localStorage里，而用户信息则存在内存 store中。这样可以在 vuex中存储一个标记用户登录状态的属性 auth，方便权限控制。

代码示例

//store.js
{
state:{
token:window.localStorage.getItem('token'),
auth:false,
userInfo:{}
},
mutations:{
setToken(state,token){
state.token=token
window.localStorage.setItem('token',token)
},
clearToken(state){
state.token=''
window.localStorage.setItem('token','')
},
setUserInfo(state,userInfo){
state.userInfo=userInfo
state.auth=true//获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
}
},
actions:{
asyncgetUserInfo(ctx,token){
returnfetchUserInfo(token).then(response=>{
if(response.code===200){
ctx.commit('setUserInfo',response.data)
}
returnresponse
})
},
asynclogin(ctx,account){
returnlogin(account).then(response=>{
if(response.code===200){
ctx.commit('setUserInfo',response.data.userInfo)
ctx.commit('setToken',response.data.token)
}
})
}
}
}

写好路由表和vuex之后，给所有路由设置一个全局守卫，在进入路由之前进行权限检查，并导航到对应的路由。

//store.js
{
state:{
token:window.localStorage.getItem('token'),
auth:false,
userInfo:{}
},
mutations:{
setToken(state,token){
state.token=token
window.localStorage.setItem('token',token)
},
clearToken(state){
state.token=''
window.localStorage.setItem('token','')
},
setUserInfo(state,userInfo){
state.userInfo=userInfo
state.auth=true//获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
}
},
actions:{
asyncgetUserInfo(ctx,token){
returnfetchUserInfo(token).then(response=>{
if(response.code===200){
ctx.commit('setUserInfo',response.data)
}
returnresponse
})
},
asynclogin(ctx,account){
returnlogin(account).then(response=>{
if(response.code===200){
ctx.commit('setUserInfo',response.data.userInfo)
ctx.commit('setToken',response.data.token)
}
})
}
}
}

上述的方法是基于 jwt认证方式，本地不持久化用户信息，只保存 token，当用户刷新或者重新打开网页时，进入需要登录的页面都会尝试去请求用户信息，该操作在整个访问过程中只进行一次，直到刷新或者重新打开，对于应用后期的开发维护和扩展支持都很好。

动态加载菜单和路由(addRoutes)

有时候为了安全，我们需要根据用户权限或者是用户属性去动态的添加菜单和路由表，可以实现对用户的功能进行定制。 vue-router提供了 addRoutes()方法，可以动态注册路由，需要注意的是，动态添加路由是在路由表中 push路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。

代码示例

//store.js
//将需要动态注册的路由提取到vuex中
constdynamicRoutes=[
{
path:'/manage',
name:'Manage',
meta:{
requireAuth:true
},
component:()=>import('./views/Manage')
},
{
path:'/userCenter',
name:'UserCenter',
meta:{
requireAuth:true
},
component:()=>import('./views/UserCenter')
}
]

在 vuex中添加 userRoutes数组用于存储用户的定制菜单。在setUserInfo中根据后端返回的菜单生成用户的路由表。

//store.js
setUserInfo(state,userInfo){
state.userInfo=userInfo
state.auth=true//获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
//生成用户路由表
state.userRoutes=dynamicRoutes.filter(route=>{
returnuserInfo.menus.some(menu=>menu.name===route.name)
})
router.addRoutes(state.userRoutes)//注册路由
}

修改菜单渲染

//App.vue

主页
登录

{{menu.title}}

总结

以上所述是小编给大家介绍的Vue权限控制的两种方法(路由验证),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue 权限控制的两种方法(路由验证)

热门推荐

随机推荐