Vue 简单实现前端权限控制的示例
简要说明
最近写了一下vue控制权限(菜单、路由)的项目，用了vuex、addRoutes动态添加路由方法等，总共100多行代码，跟大家分享一下~
逻辑梳理
- 除登录接口、退出接口外，其余接口增加token验证。
- 打开页面时请求获取菜单接口，请求不成功说明未登录，给route默认添加login页面以及*重定向。
- 登录成功后获取到token，把token存入session以及请求头。
- 登录成功后获取菜单接口，请求回来的路由和vuex里面全部的路由进行匹配，获取component。
- 把获取完component的路由格式化，找自己的parentId，如果找到的话插入到该元素的child里面。
思路大致就是这样，有听得模糊的也不要紧，跟随我的步伐看看代码是怎样写的你就明白了~
实现
1.初始化
route.js
importVuefrom'vue'
importRouterfrom'vue-router'
importstorefrom'@/store'
Vue.use(Router)
constrouter=newRouter()
//全局前置守卫
router.beforeEach(async(to,from,next)=>{
letuserRoutes=store.state.global.userRoutes//userRoutes当前用户拥有的权限
if(userRoutes.length&&!userRoutes.filter(item=>item.path==to.path).length){
next(from.path)
return
}
next()
})
exportdefaultrouter
大家可以看到route.js里没有路由，因为路由都是动态添加进去的，只有一个全局守卫，作用是当登陆成功后，用户地址栏手动输入地址，判断路由是否正确，如果正确就让他跳转。
vuex
//state.js
exportdefault{
//全部路由
allRoutes:[
//登录页面
{
path:'/demo',
name:'demo',
component:()=>import('@/views/demo')
},
{
path:'*',
redirect:'/demo'
},
//主页面
{
path:'/',
component:()=>import('@/views'),
},
{
path:'/home',
name:'home',
component:()=>import('@/views/home')
}
],
//用户匹配的路由,要用addRoutes添加到route
userRoutes:[],
//渲染用户菜单
userMenus:[]
}
state中需要定义全部的路由，这个用来跟后台请求到的权限进行匹配，并且获取component组件。
actions.js里面是主要的逻辑，其中getMenu方法是本文的核心
数据返回时格式
menu=[
{id:1,name:'首页',path:'/home',parentId:0},
{id:2,name:'系统设置',path:'',parentId:0},
{id:3,name:'角色配置',path:'/roles',parentId:2},
{id:4,name:'用户配置',path:'/users',parentId:2}
]
需要处理成
menu=[
{id:1,name:'首页',path:'/home',parentId:0},
{id:2,name:'系统设置',path:'',parentId:0,
child:[
{id:3,name:'角色配置',path:'/roles',parentId:2},
{id:4,name:'用户配置',path:'/users',parentId:2}
]
},
]
所以在下方需要用到递归来处理↓
//actions.js
//获取当前用户权限
getMenu:async({state,commit,dispatch})=>{
//请求当前用户所拥有的权限
letresult=awaitaxios('/api/menu/find')
if(result.data.code>0){
letuserRoutes=result.data.result
userRoutes.forEach(item=>{
item.child=[]
state.allRoutes.forEach(res=>{
if(item.path==res.path){
item.component=res.component
}
})
})
letoneArr=[],anotherArr=[]//oneArr一级路由anotherArr其他级别路由
oneArr=userRoutes.filter(item=>!item.parentId)
anotherArr=userRoutes.filter(item=>item.parentId)
anotherArr.forEach(item=>{
oneArr.forEach(obj=>{
if(item.parentId==obj.id){//如果匹配说明找到父级，直接push到父级的child里面
if(!obj.child.filter(k=>k.id==item.id).length){
obj.child.push(item)
}
}else{//如果没有，说明本级路由没有找到，去下一级别路由找父级路由级别：1级路由，2级路由，3级路由......
dispatch('recurrArr',{arr:oneArr,items:item})
}
})
})
commit('setState',{state:'userRoutes',value:userRoutes})
commit('setState',{state:'userMenus',value:oneArr})
return{code:1,data:userRoutes}//处理完成后返回oneArr是递归处理后嵌套的，userRoutes是获取到component来渲染route的
}else{
return{code:0}
}
},
//递归找自己的parentId
recurrArr:({dispatch},{arr,items})=>{
if(!arr){
return
}
for(leti=0;iitems.id==k.id).length){
item.child.push(items)
}
break;
}else{
dispatch('recurrArr',{arr:item.child,items:items})
}
}
}
到现在为止，路由以及菜单的数据，就已经处理完了，剩下的就是addRoutes添加到route路由里面，这样页面就可以跳转了~
我们接着来看登录：
//登录
login:async({commit,dispatch},params)=>{
letresult=awaitaxios('/api/login',{params})
if(result.data.code>0){
//登录成功以后获取当前用户权限路由
letuserRoutes=awaitdispatch('getMenu')
if(userRoutes.code>0){
//把请求回来的路由动态添加到route里
router.addRoutes(userRoutes.data)
//添加完成后，现在可以跳转到首页了~
router.push('/home')
}
return{code:1,data:result.data}
}else{
console.log(result.data.msg)
return{code:0}
}
},
现在就已经大功告成了，你的项目可以进行正常的登录、跳转、动态更新路由等操作了~
但是
现在还差最后一步，退出登录
因为在axios拦截里面，token失效后会调用退出接口
axios.interceptors.response.use(
response=>{
if(response.status===200){
//身份验证失败
if(response.data.code===-1){
//执行退出登录
store.dispatch('global/loginOut')
}else{
//如果请求头里有token
lettoken=response.headers.token
if(token){
localStorage.setItem('token',token)
axios.defaults.headers.token=token
}
}
returnPromise.resolve(response)
}else{
returnPromise.reject(response)
}
}
)
所以才会提到开头说：刚打开页面的时候，不管有没有登录，都去请求菜单接口。
如果没有登录，则会调用退出登录接口，给路由设置默认路由。
//退出登录
loginOut:async({state})=>{
//退出登录清空token和headers里面的token
localStorage.removeItem('token')
deleteaxios.defaults.headers.token
//退出登录要动态添加登录页面和*重定向页面
leterrRoutes=state.allRoutes.filter(item=>item.path=='*')
errRoutes.push(state.allRoutes.filter(res=>errRoutes[0].redirect==res.path)[0])
router.addRoutes(errRoutes);
router.currentRoute.path!=='/demo'?router.push("/demo"):null
letresult=awaitaxios('/api/loginOut',{params:{userId:state.userId}})
if(result.data.code!==1){
console.log('退出登录接口异常')
}
},
到现在为止，有项目就算大功告成了~
到此这篇关于Vue简单实现前端权限控制的示例的文章就介绍到这了,更多相关Vue前端权限控制内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！