vue中根据权限动态的设置路由

本篇文章主要讲的是使用vue的框架 vue-element-admin, 来解决根据不同的角色权限, 显示不同的路由.

⽅式⼀，后台返回⾓⾊树形路由表，前端添加动态路由

⽅式⼆，后台返回⽤户⾓⾊，前端在路由表⾥添加⾓⾊路由权限

下面详细的来讲一下,这两种方法:

动态路由⽅式⼀

后台返回⾓⾊树形路由表，前端添加动态路由。登录获取到⽤户的信息之后，通过⽤户⾓⾊访问后台接⼝获取动态路由，依赖后台接⼝返回路由表

后台数据样例如下:

const serviceMap = [// 登录界⾯{path: '/login',// 这⾥后台返回的是component: 'login',前端需要处理成以下代码component: map['login'],hidden: true},// ⾸⻚{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: map['dashboard'],meta: { title: '⾸⻚', icon: 'dashboard' }}]},{path: '/customer',component: Layout,children: [{path: 'list',name: 'customer',// 这⾥后台返回的是component: 'customer',前端需要处理成以下代码component: map['customer'],meta: {roles: ['customer'],title: '顾客管理',icon: 'peo'}}]},// 产品管理{path: '/product',component: Layout,children: [{path: 'list',name: 'product',component: map['product'],meta: { title: '产品管理', icon: 'table' }}]},// 审核{path: '/examine',component: Layout,meta: { title: '审核⼤厅', icon: 'tree' },children: [{path: 'waiterExamine',component: map['waiterExamine'],meta: { title: '员⼯审核' }},{path: 'cashExamine',component: map['cashExamine'],meta: { title: '提现审核' }},]},// 404报错提示⻚⾯{path: '/404',component: map['error'],hidden: true},{ path: '*', redirect: '/404', hidden: true }
]

前端最终将路由表动态添加到路由中，下⽅的router对象是引⼊的

import router from '@/router/index';
router.options.routes = serviceMap;
router.addRoutes(serviceMap);

动态路由⽅式⼆

后台返回⽤户⾓⾊，前端在路由表⾥添加⾓⾊路由权限

需要操作的文件有:

1. src/router/index.js
2. src/store/modules/user.js
3. src/store/getters.js
4. src/permission.js
5. src/store/modules/permission.js

1. 操作src/router/index.js

在该⽂件内内置两组路由，⼀组是基本路由constantRoutes，⼀组是需要权限控制的路由asyncRoutes，将来在权限控制的路由组内过滤出对应的路由表，在需要权限控制的路由内添加如下代表权限的代码 meta: { roles: ['教师'] }

export const constantRoutes = [
// 登录界⾯
{path: '/login',component: () => import('@/views/login/index'),hidden: true
},
// ⾸⻚
{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '⾸⻚', icon: 'dashboard' }}]
},
// 404报错提示⻚⾯
{path: '/404',component: () => import('@/views/404'),hidden: true
},
{ path: '*', redirect: '/404', hidden: true }
];
// 需要动态处理的路由
export const asyncRoutes = [
// 顾客管理
{path: '/customer',component: Layout,meta: { roles: ['教师'] },children: [{path: 'list',name: 'customer',component: () => import('@/views/customer/index'),meta: {roles: ['教师'],title: '顾客管理',icon: 'peo'}}]
},
// 审核
{path: '/examine',component: Layout,meta: { roles: ['审核管理员'], title: '审核⼤厅', icon: 'tree' },children: [{path: 'waiterExamine',component: () => import('@/views/examine/waiterExamine'),meta: { title: '员⼯审核' }},{path: 'cashExamine',component: () => import('@/views/examine/cashExamine'),meta: { title: '提现审核' }},]
},
]

基本路由constantRoutes注册到路由器对象内

const createRouter = () => new Router({// mode: 'history', // require service supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes})

2. 操作src/store/modules/user.js

在state中添加roles状态

roles: []

在mutations⾥添加SET_ROLES突变

 SET_ROLES: (state, roles) => {state.roles = roles}

在actions的getInfo添加如下代码，根据获取到的后台数据中的roles⽣成roles['管理员','教师']这种格式的⾓⾊信息，然后调⽤突变

getInfo({ commit, state }) {return new Promise((resolve, reject) => {getInfo(state.token).then(response => {const { data } = responselet roles = data.roles.map(item => item.name)// 在src/permission.js中会⽤到这个仓库的roles数据commit('SET_ROLES', roles);data.roles = roles;// 在src/permission.js中会⽤到data中的roles数据resolve(data);}).catch(error => {reject(error)})})
},

3. 操作src/store/getters.js

在getters内添加如下代码，将user仓库的roles状态直接暴露到getters中，⽅便src/permission.js中使⽤

roles: state => state.user.roles

4. 操作src/permission.js

引⼊路由⽂件中的基础路由，等过滤出合适的路由后合并基础路由，设置为路由表。

import { constantRoutes } from '@/router'

该⽂件31⾏上下，添加如下代码，部分代码内部已经有

//如下代码就是在使⽤仓库中的roles数据，查看学习即可，不⽤动
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {next()
} else {try {//如下代码在获取user仓库中的getInfo动作的resolve的data中的roles数据const { roles } = await store.dispatch('user/getInfo')//如下代码在分发permission仓库的generateRoutes动作，该动作功能是根据当前的⻆⾊从
router.js的权限路由中过滤出符合当前⻆⾊的路由数组。accessRoutes⽬前就是符合权限的路由
表数组const accessRoutes = await store.dispatch('permission/generateRoutes',
roles)// 路由表⽴即⽣效，constantRoutes.concat(accessRoutes)是进⾏路由的合并router.options.routes = constantRoutes.concat(accessRoutes);// 添加路由到路由表中router.addRoutes(constantRoutes.concat(accessRoutes))next({ ...to, replace: true })} catch (error) {await store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)NProgress.done()}
}

5. 操作src/store/modules/permission.js

src/permission.js中分发了permission仓库中的generateRoutes。在permission仓库中的generateRoutes动作代码如下：

generateRoutes({ commit }, roles) {return new Promise(resolve => {let accessedRoutes = [];if (roles.includes('管理员')) {// 代表如果是管理员⻆⾊，那么有所有的⻆⾊权限，管理员这⼏个字要与router.js的roles的取值⼀致accessedRoutes = asyncRoutes || []} else {// 如果不是管理员⻆⾊，那么根据对应的⻆⾊过滤权限accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})
}

以上就是全部内容啦,希望对您有所帮助哈,有什么问题欢迎指正和讨论哦~

vue中根据权限动态的设置路由相关推荐

Vue实现角色权限动态路由详细教程，在vue-admin-template基础上修改，附免费完整项目代码
前言 vue-admin-template是一个最基础的后台管理模板,只包含了一个后台需要最基础的东西,如果clone的是它的master分支,是没有权限管理的,只有完整版vue-element-ad ...
vue系统权限(动态加载路由方式)
目录 1.注册vue-router 2.声明默认路由和权限路由 3.用vuex实现全局登录.退出登录等方法 4.用vuex模块单独写权限路由的判断 5.监听路由跳转实现动态加载权限菜单需要用到动 ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
vue 项目如何实现动态加载路由？
一般来说,vue项目实现动态路由的方式大体可分为两种: 前端把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 后台接口提供当前用户对应权限的路由表,前端通过调接口拿到后处理(后 ...
vue中对echarts折线图设置基准线/警告线，可在输入框输入想要的值，并改变已有的基准线的值。
系列文章目录前端小白,来此做笔记,前端vue框架下的echart添加警戒线,可在输入框中去输入想要设置的数值,按保存键去实现.同时可对警戒线的上下进行颜色的区分.采用的后端动态数据写文章为了以后碰 ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
Vue 中 title 的动态修改
使用 document.title 方法通过 DOM 操作来修改 title 的值 title 的传递(路由传递) 路由传递的方法,即通过路由跳转传参传递 title 的值.由于业务逻辑中本身就包含大 ...
vue中tab标签页keep-alive二级路由+删除指定缓存页面
1.实现效果 2.keep-alive 2.1是什么: keep-alive 是 Vue 的内置组件,keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 transiti ...
若依前后端分离版(vue)中配置页面跳转的路由
场景若依前后端分离版本地搭建开发环境并运行项目的教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在此基 ...

vue中根据权限动态的设置路由

vue中根据权限动态的设置路由相关推荐

最新文章

热门文章

vue中 根据权限 动态的设置路由

vue中 根据权限 动态的设置路由相关推荐

最新文章

热门文章

vue中根据权限动态的设置路由

vue中根据权限动态的设置路由相关推荐