vue如何实现权限控制,用vue实现权限管理的案例
本文主要介绍Vue简单实现前端权限控制的例子。通过示例代码进行了非常详细的介绍，对大家的学习或者工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
简要说明
最近写了关于vue控制权限(菜单，路由)的条目，用vuex，addRoutes动态添加路由方法等。一共100多行代码，所以想和大家分享一下~
逻辑梳理
除了登录界面和退出界面，其他界面都增加了令牌验证。
打开页面时，请求获得菜单界面。如果请求不成功，这意味着您没有登录。默认情况下，添加登录页面并*重定向到路由。
成功登录后获取令牌，并将令牌存储在会话和请求头中。
成功登录后，获得菜单界面，请求的路由匹配vuex中的所有路由以获得组件。
格式化获得的组件的路由，找到自己的parentId，如果找到的话，将其插入到元素的子元素中。
大概就是这个意思。隐约听到也没关系。跟着我的步骤看看代码是怎么写的，你就明白了~
实现
1.初始化
route.js
从“vue”导入Vue
从“vue路由器”导入路由器
从“@/store”导入商店
Vue.use(路由器)
const router=新路由器()
//全球前沿卫士
router.beforeEach( async (to，from，next)={
让routes=当前用户的store.state.global.userroutes//Userroutes权限
if (userRoutes.length！user routes . filter(item=item . path==to . path)。长度){
下一步(from.path)
返回
}
下一个()
})
导出默认路由器
大家可以看到，route.js中没有路由，因为所有路由都是动态添加的，只有一个全局守卫，其作用是在用户登录成功后，在地址栏中手动输入地址，判断路由是否正确，如果正确就让他跳转。
状态管理
//state.js
导出默认值{
//所有路线
所有路由：[
//登录页面
{
路径：“/demo”，
名称：演示，
component:()=import( @/views/demo )
},
{
路径：“*”，
重定向：“/demo”
},
//主页
{
路径：“/”，
组件：()=导入( @/views )，
},
{
路径：“/home”，
姓名：家，
组件：()=导入( @/views/home )
}
],
//用户匹配的路由，应使用addRoutes将其添加到路由中。
用户路由：[]，
//呈现用户菜单
用户菜单：[]
}
所有的路由都需要在状态中定义，状态用于匹配后台请求的权限，获取组件构件。
Actions.js是主要逻辑，getMenu方法是本文的核心。
返回数据时的格式
菜单=[
{id: 1，名称：“主页”，路径：“/home”，parentId: 0}，
{id: 2，名称：“系统设置”，路径：“”，parentId: 0}，
{id: 3，名称：“角色配置”，路径：“/roles”，parentId: 2}，
{id: 4，名称：“用户配置”，路径：“/用户”，parentId: 2}
]
需要加工成
菜单=[
{id: 1，名称：“主页”，路径：“/home”，parentId: 0}，
{id: 2，名称：“系统设置”，路径：“”，parentId: 0，
孩子：[
{id: 3，名称：“角色配置”，路径：“/roles”，parentId: 2}，
{id: 4，名称：“用户配置”，路径：“/用户”，parentId: 2}
]
},
]
所以需要用递归来处理
//actions.js
//获取当前用户权限
getMenu: async ({ state，commit，dispatch })={
//请求当前用户的权限。
let result=await axios(/API/menu/find )
if (result.data.code 0) {
let user routes=result . data . result
userRoutes.forEach(item={
item.child=[]
state.allRoutes.forEach(res={
if (item.path==res.path) {
项目.组件=资源.组件
}
})
})
设Arr=[]，Another arr=[]//一个arr一级路由另一个arr其他级路由
oneArr=userRoutes.filter(item=！item.parentId)
another arr=user routes . filter(item=item . parentid)
anotherArr.forEach(item={
oneArr.forEach(obj={
If (item.parentId==obj.id) {//如果匹配的描述找到了父级，就直接推送到父级的子级。
如果(！obj . child . filter(k=k . id==item . id)。长度){
推动(项目)
}
} else {//如果没有，说明没有找到当前级别的路由。转到下一级路由查找父路由级别：1级路由、2级路由和3级路由。
分派( recurrArr ，{arr: oneArr，items: item})
}
})
})
提交( setState ，{state: userRoutes ，value: userRoutes})
提交( setState ，{state: userMenus ，值：oneArr})
Return {code: 1，data:userRoutes }//处理后返回的oneArr经过递归处理后嵌套，user routes获取组件渲染路由。
}否则{
返回{代码：0}
}
},
//递归查找自己的parentId
recurrArr: ({dispatch}，{arr，items})={
如果(！arr) {
返回
}
for(设I=0；长度；i ){
let item=arr[i]
if (item.id==items.parentId) {
如果(！item . child . filter(k=items . id==k . id)。长度){
item.child.push(项目)
}
打破；
}否则{
分派( recurrArr ，{arr: item.child，items: items})
}
}
}
到目前为止，路线和菜单的数据都处理好了，剩下的就是给路线添加addRoutes，这样页面就可以跳转了~
然后让我们看看登录：
//登录
登录：异步({提交，分派}，参数)={
let result=await axios(/API/log in ，{params})
if(result.data.code 0) {
//成功登录后获取当前用户权限路由。
让user routes=wait dispatch( get menu )
if (userRoutes.code 0) {
//将请求的路由动态添加到路由中。
router . add routes(user routes . data)
//添加后，现在可以跳转到首页了~
router.push(/home )
}
返回{code: 1，data: result.data}
}否则{
console.log(结果.数据.消息)
返回{代码：0}
}
},
现在完成了，你的项目可以登录，跳转，动态更新路线等等~
但是
现在是最后一步，注销。
因为在axios拦截中，令牌过期后会调用出口接口。
axios . interceptors . response . use(
响应={
if (response.status===200) {
//认证失败
if(response.data.code===-1) {
//执行注销登录
store.dispatch(全局/登录)
}否则{
//如果请求头中有令牌
let token=response . headers . token
if(token) {
localStorage.setItem(token ，token)
axios . defaults . headers . token=token
}
}
返回承诺。解决(响应)
}否则{
退货承诺.拒绝(回应)
}
}
)
所以我才提到开头：刚打开页面的时候，我要求无论登录与否都要菜单界面。
如果没有登录，将调用注销接口为路由设置默认路由。
//注销。
loginOut: async ({ state })={
//注销并清除token和headers中的token。
local storage . remove item(“token”)
删除axios.defaults.headers.token
//注销动态添加登录页面和*重定向页面。
let errRoutes=state . all routes . filter(item=item . path== * )
errRoutes . push(state . all routes . filter(RES=errRoutes[0])。redirect==res.path)[0])
router . add routes(errRoutes)；
router . current out . path！==/demo ？router.push(/demo) : null
let result=await axios(/API/log in out ，{params: {userId: state.userId}})
if(result.data.code！==1) {
Console.log(“退出登录界面时出现异常”)
}
},
到目前为止，有项目就搞定了~
关于Vue简单实现前端权限控制的例子这篇文章到此为止。关于Vue前端权限控制的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。