Vue 庞杂了结前端权力支配的示例

这篇文章主要介绍了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方法是