|
这篇文章主要介绍了Vue 简单实现前端权限控制的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
简要说明
最近写了一下vue控制权限(菜单、路由)的项目，用了vuex、addRoutes动态添加路由方法等，总共100多行代码，跟大家分享一下~
逻辑梳理
除登录接口、退出接口外，其余接口增加token验证。
打开页面时请求获取菜单接口，请求不成功说明未登录，给route默认添加login页面以及 * 重定向。
登录成功后获取到token，把token存入session以及请求头。
登录成功后获取菜单接口，请求回来的路由和vuex里面全部的路由进行匹配，获取component。
把获取完component的路由格式化，找自己的parentId，如果找到的话插入到该元素的child里面。
思路大致就是这样，有听得模糊的也不要紧，跟随我的步伐看看代码是怎样写的你就明白了~
实现
1.初始化
route.js
import Vue from ‘vue’
import Router from ‘vue-router’
import store from ‘@/store’
Vue.use(Router)
const router = new Router()
// 全局前置守卫
router.beforeEach( async (to, from, next) => {
let userRoutes = store.state.global.userRoutes //userRoutes 当前用户拥有的权限
if (userRoutes.length && !userRoutes.filter(item => item.path == to.path).length) {
next(from.path)
return
}
next()
})
export default router
大家可以看到route.js里没有路由，因为路由都是动态添加进去的，只有一个全局守卫，作用是当登陆成功后，用户地址栏手动输入地址，判断路由是否正确，如果正确就让他跳转。
vuex
//state.js
export default {
// 全部路由
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 }) => {
//请求当前用户所拥有的权限
let result = await axios(‘/api/menu/find’)
if (result.data.code > 0) {
let userRoutes = result.data.result
userRoutes.forEach(item => {
item.child = []
state.allRoutes.forEach(res => {
if (item.path == res.path) {
item.component = res.component
}
})
})
let oneArr = [], 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(let i = 0; i < arr.length; i ++ ){
let item = arr[i]
if (item.id == items.parentId) {
if (!item.child.filter(k => items.id == k.id).length) {
item.child.push(items)
}
break;
} else {
dispatch(‘recurrArr’, {arr: item.child, items: items})
}
}
}
到现在为止，路由以及菜单的数据，就已经处理完了，剩下的就是addRoutes添加到route路由里面，这样页面就可以跳转了~
我们接着来看登录：
（编辑：应用网_阳江站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
