vue角色权限处理,vue 鉴权
最近参加了公司一个新的B端项目的R&D。在从头构建项目的过程中，我遇到了关于项目认证的问题。本文主要介绍在Vue的后台管理中，如何使用Vuex实现角色认证的相关信息。有需要的可以参考一下。
目录
前言功能分析实现思路代码实现vuex中定义的用户模块，存储用户信息和用户侧导航数据，在路由器的route meta中添加角色，定义当前路由可以访问的所有角色，路由器在新路由前面添加第一位作为权限拦截侧导航页，在getters中使用authMenus循环侧导航页，登录时调用请求登录的动作，就大功告成了。摘要
前言
一直以来，我们在使用vue进行后台管理时，不同角色的权限功能都是困扰我们很久的问题。在本文中，我将带你实现vue后台管理中的用户角色权限功能！
功能分析
在常见的管理系统中，超级管理员会给每个用户分配角色，有利于管理员、编辑、管理员的角色。不同的角色登录，我们的侧边导航不一样，可以访问的路线也不一样。
实现思路
角色认证有两种常见的想法：
1静态
通俗点说就是前端把所有导航数据和所有路线都固定在前端。每个导航和路线的新添加的角色属性表示当前路线或当前导航可以访问的角色。登录时，界面返回到用户角色role进行判断和过滤，从而实现认证。
2动态
前端定义基本路线，用户的导航数据和路线数据存储在数据库中。用户登录时，请求接口获取当前用户可以访问的路线和菜单，前端获取数据动态渲染导航，并通过vue route addRoute方法动态添加到路线中。
代码实现
在本文中，vuex将带您携手实现静态角色认证的思想(动态角色认证将在后面说明)。
vuex中定义user模块，存储用户信息以及用户侧边导航数据
//引入封装的登录模型函数
从“@/api”导入doLogin
导出默认值{
命名空间：对，
状态：{
//当用户信息被缓存备份阻止刷新时，判断缓存获取。
//昵称昵称、头像用户头像等用户基本信息
userInfo:localstorate . getitem( userInfo )
？
JSON . parse(localstorate . getitem( userInfo ))
：
{}
,
//登录返回的令牌密钥
token:local storage . getitem( token ) ，
//当前用户的角色
role:local storage . getitem( role ) ，
//所有导航下面是一个例子
菜单：[
//每个导航新增的roles属性代表了所有可以访问当前用户的角色。
{
标签:“仪表板”，
路径：“/仪表板”，
角色：[admin ， a ， b ， superAdmin]，
图标：“el-icon-s-data”
},
{
标签:“商品管理”，
路径： el-icon-s-goods ，
图标：“el-icon-s-data”，
角色：[admin ， a ， b ， superAdmin]
},
{
标签:“个人中心”，
路径：“/用户”，
角色：[admin ， a ， b ， superAdmin]，
图标：“El-图标-用户-实体”
},
{
标签:“设置”，
路径：“/设置”，
角色：[a ， b ，超级管理员]，
图标：“el-icon-s-tools”
}
]
},
getters: {
authMenus(状态){
//定义getters来筛选当前用户角色无法访问的导航
//这是当前用户角色可以访问的导航
返回state . menus . filter(menu=menu . roles . includes(state . role))
}
},
突变：{
INIT_LOGIN (state，{userInfo，token，role}) {
//登录成功存储用户信息。
state.userInfo=用户信息
state.token=令牌
状态。角色=角色
//缓存起来防止刷新状态管理状态丢失
localStorage.setItem(userInfo ，JSON.stringify(userInfo))
localStorage.setItem(token ，token)
localStorage.setItem(role ，role)
}
},
动作：{
DO_LOGIN ({commit}，params) {
//动作中发送请求进行登录
多洛金（参数)。然后(res={
if(res.data.code===200) {
//请求成功触发变化存储用户信息包括作用
提交( INIT_LOGIN ，{
用户信息：资源数据。数据。用户信息，
token: res.data.data.token，
角色：资源.数据.数据.角色
})
}
})
}
}
}
router中路由meta中新增roles定义当前路由可以访问的所有的角色
常量路由=[
{
路径："/",
组件：管理，
元：{
角色："*"//*所有角色都可以访问
},
儿童：[
{
路径："/",
重定向："/仪表板",
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/仪表板",
名称： 仪表盘，
组件：()=导入( _视图/仪表板),
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/itemLists "，
名称： 商品管理，
组件：()=导入( _视图/项目),
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/itemAdd "，
名称： 增加商品，
component:()=import( _ views/Items/components/ItemAdd )，
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/itemUpdate "，
名称： 修改商品，
组件：()=导入( _视图/项目/组件/项目更新)，
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/目录列表"，
名称： 分类管理，
组件：()=导入( _ view/Cate )，
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/用户",
名称： 个人中心，
component:()=import( _ views/SetUser )，
元：{
角色：[admin ， a ， b ， superAdmin]
}
},
{
路径："/设置",
名称： 设置，
组件：()=导入( _视图/设置)，
元：{
角色：[a ， b ， superAdmin]
}
}
]
},
{
路径："/登录"，
组件：()=导入( _views/Login )，
元：{
角色："*"
}
},
{
路径："*",
组件：()=
导入( _views/NotFound )，
元：{
角色："*"
}
},
{
路径："/noAuth "，
组件：()=
导入( _views/Nopermission )，
元：{
角色："*"
}
}
]
router新增路由前置首位做权限拦截
router.beforeEach(收件人，发件人，下一个)={
//登录鉴权
if (to.path！==/login) {
if (isLogin()) {
/*
登录成功后
判断当前用户的角色能否访问当前路由
可以的话放行
不能到没有权限这个页面去
*/
if (to.meta.roles===*) {
//所有用户都可以访问直接放行
下一个()
}否则{
//判断角色中是否包含用户的作用
const role=本地存储。getitem( role )
如果(到。meta。角色。包括(角色)){
下一个()
}否则{
//去没有权限这个页面这是没有权限路由需要自己创建一个
下一个(/noAuth )
}
}
}否则{
下一步(/login )
}
}否则{
下一个()
}
}
侧边导航页面使用getters中的authMenus循环侧边导航
el-menu @select=choseMenu
div v-for= nav in $ store。getters[用户/授权菜单]:key= nav。标签
El菜单项：index= nav。标签 @ click=切换导航(导航。path，nav.label) v-if=！导航。儿童
i :class=nav.icon/i
span slot= title"{ nav。label } }/span
/El-菜单项
El-子菜单：index= nav。标签为 v-if= nav。儿童
模板槽=标题
i :class=nav.icon/i
span{{nav.label}}/span
/模板
埃尔-菜单项
v-for= nav。孩子们中的subNav
:key=subNav.path
:index=subNav.label
@click=switchNav(subNav.path，subNav。label)“{ { subnav。label } }/El-菜单项
/El-子菜单
/div
/el-menu
最后一步登录页登录时调用请求登录的action即可大功告成
这个store.dispatch(user/DO_LOGIN ，{
用户名：“xxx”，
密码：“xxxx”
})
总结
到此这篇关于如何使用状态管理实现某视频剪辑软件后台管理中的角色鉴权的文章就介绍到这了，更多相关状态管理实现角色鉴权内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。