vue-router实现根据用户权限显示不同菜单-动态路由

一，情景再现

做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是：
前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
import axios from 'axios'
import baseAPIs from '@/api/common'
import { Message } from 'element-ui'// 引入组件
const login = () => import('@/views/login/index.vue') // 登录页Vue.use(VueRouter)
//避免vue-router在3.0版本以上重复点击菜单报错的问题
const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}let routes = [            //先把基本的登陆路由写好{path: '/',redirect: '/login',hidden: true,},{path: '/login',component: login,name: '登录',hidden: true,},
]let router = new VueRouter({routes
})/*** 判断当前是否登录，未登录不能跳转路由* 防止未登录状态下直接输入路由跳转*/
/* eslint-disable no-new */
router.beforeEach((to, from, next) => {if (to.path == '/login') {localStorage.removeItem('USERINFO')next()}else{if (!JSON.parse(localStorage.getItem('USERINFO'))) {next({path: '/login'          })next()} else { // 登录成功// 如果资源为空得话if (store.state.common.menus.length == 0) {// 请求资源，生成动态路由let url = `${baseAPIs.serverOne}/B2CMainPlat_13_SLHZ?CCB_IBSVersion=V6&PT_STYLE=1&PT_LANGUAGE=CN&TXCODE=VAUM99`let params = { txnFcnNo: '1', token: localStorage.getItem('USERINFO')?JSON.parse(localStorage.getItem('USERINFO')).token:''}axios.get(url,{params: params}).then(response => {if (response.data.CODE == 3){Message({message: response.data.MSG,type: 'error',duration: 3 * 1000,})setTimeout(()=>{router.push({ path: '/login' })location.reload()},1000)} else {store.state.common.menus = response.data.MENUS   //也就是说，不同权限的用户登陆，所返回展示的路由菜单是不一样的getRouters(response.data.MENUS)  //设置路由addComps(rts)   //在路由中懒加载对应要渲染的组件let homeRts = [{path: '/home',component: (resolve) => require(['@/views/home/index.vue'], resolve),children: [...rts,     //从后台获取到的动态路由，展开后作为home页面的二级路由{ path: '', redirect: rts[0].path },{ path: 'consumeRule/couponDetail', name: '优惠券管理', component: resolve => require(['@/views/consumeRule/pages/couponDetail.vue'], resolve) },{ path: 'error', name: '错误', component: resolve => require(['@/views/error/index.vue'], resolve) },]   //这三个是基本的都会有的路由和菜单}]router.addRoutes(homeRts)   //将后台返回并配置好的路由，添加到路由配置中去，也就是home路由是和login并列的}}).catch(error => {console.log(error)})}next()}}
})let rts = []
const getRouters = (menus) => {for (let i = 0; i < menus.length; i++) {if (menus[i].type == 1) {let rt = {name: menus[i].name,path: menus[i].url}store.state.common.paths.push('/home/'+menus[i].url)    //这里同样报错动态路由的urlrts.push(rt)            //这里就将每个菜单的路由push进去了}if (menus[i].permission) {    //查看本菜单，该登陆用用户的权限，store.state.common.userInfo.permissions.push(menus[i].permission)   //有权限，就把所有该用户的权限保存起来，到时候该用户发请求，就利用这个判断该用户是否有权限完成该操作}if (menus[i].children && menus[i].children.length > 0) {  //当存在子菜单时getRouters(menus[i].children)  //递归实现子菜单的路由设置}}
}
//路由懒加载对应的渲染组件
const addComps = (routres) => {return routres.forEach(rt => {rt.component = (resolve) => require([`@/views/${rt.path}`], resolve)})
}export default router

二，原理解析

对应的vuex中存储的：

vue-router实现根据用户权限显示不同菜单-动态路由相关推荐

从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战：动态路由+同构...
上期回顾说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面
目录左边菜单动态的展示左边菜单的属性介绍遍历菜单左边菜单折叠效果不同的菜单右面展示不同的页面左边菜单动态的展示首先后端的接口要返回菜单的list集合,是json格式,我使用的是pytho ...
Vue不同用户权限显示不同内容
一.登录页 <template><div><div class="username"><span>姓名</span>&l ...
动态菜单，根据登录用户权限返回不同菜单，登录完成跳转到不同的首页
1.动态菜单,前提是根据后端返回的不同菜单,展示给不同的人,路由一定要和菜单返回的URL保持一致, 2.前提是,路由中不要写死redirect到某一个指定文件,因为登录的用户不一定有这个权限 3.流 ...
Sharepoint 2010 根据用户权限隐藏Ribbon菜单
关于隐藏Ribbon菜单的文章,我也写过几篇了.本文介绍的是根据用户的权限来隐藏Ribbon菜单. 1.使用SPD打开站点,并打开母版页.默认是v4.master.[修改前注意备份] 2.找到下面的代 ...
前端学习（2595）：后台系统的权限控制和管理--动态路由
路由原理及vue实现动态路由
路由原理在前端开发中,路由通常用于实现 SPA 应用程序,即在一个页面中切换不同的内容或页面,而不需要重新加载整个页面.路由的实现原理是通过监听 URL 的变化,然后根据不同的 URL 加载不同的内 ...
Vue 人资实战篇八权限设计重点！！！路由访问权限，左侧导航栏显示等等，还有 mixin 混入方法
1.0 权限设计-RBAC的权限设计思想传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限基于此,RBAC的权限模型就应 ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
若依系统用户权限模型分析
本文从本人博客搬运,原文格式更加美观,可以移步原文阅读:若依系统用户权限模型分析用户-角色-菜单 1.基本使用这是一个经典的用户-角色-权限的模型,其中菜单就代表了权限(因为权限就代表能否访问某个 ...

vue-router实现根据用户权限显示不同菜单-动态路由

一，情景再现

二，原理解析

vue-router实现根据用户权限显示不同菜单-动态路由相关推荐

最新文章

热门文章