简要说明
最近写了一下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' "/demo") : null let result = await axios('/api/loginOut', {params: {userId: state.userId}}) if(result.data.code !== 1) { console.log('退出登录接口异常') } },
到现在为止,有项目就算大功告成了~
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“Vue 简单实现前端权限控制的示例”评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]