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路由里面,这样页面就可以跳转了~
我们接着来看登录:
// 登录 login: async ({ commit, dispatch}, params) => { let result = await axios('/api/login', {params}) if(result.data.code > 0) { // 登录成功以后 获取当前用户权限路由 let userRoutes = await dispatch('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 let token = response.headers.token if(token) { localStorage.setItem('token', token) axios.defaults.headers.token = token } } return Promise.resolve(response) } else { return Promise.reject(response) } } )
所以才会提到开头说:刚打开页面的时候,不管有没有登录,都去请求菜单接口。
如果没有登录,则会调用退出登录接口,给路由设置默认路由。
// 退出登录 loginOut: async ({ state }) => { // 退出登录清空 token 和 headers 里面的 token localStorage.removeItem('token') delete axios.defaults.headers.token // 退出登录要动态添加 登录页面 和 * 重定向页面 let errRoutes = 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 let result = await axios('/api/loginOut', {params: {userId: state.userId}}) if(result.data.code !== 1) { console.log('退出登录接口异常') } },
到现在为止,有项目就算大功告成了~
到此这篇关于Vue 简单实现前端权限控制的示例的文章就介绍到这了,更多相关Vue 前端权限控制内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18