vue路由权限
想要了解更多关于vue路由权限和vue路由权限管理的知识吗？那么本文将为您提供全面的介绍和解释，同时还会分享一些实用的技巧和建议。
本文内容目录一览：
vue-element-admin权限路由
1、java端:
1.1、通过接口闷唯获取该用户的角色权限
此处不再复述
2、没态vue-element
其主要处理是在这个文件
2.2、permission.js
import router, {asyncRoutes,constantRoutes }from '@/router'
import {getAuthMenu }from '@/api/user'
import Layoutfrom '@/蚂察培layout'
/**
* Use meta.role to determine if the current user has permission
* @param roles
* @param route
*/
function hasPermission(roles, route) {
if (route.meta route.meta.roles) {
return roles.some(role = route.meta.roles.includes(role))
}else {
return true
}
}
/**
* Filter asynchronous routing tables by recursion
* @param routes asyncRoutes
* @param roles
*/
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route = {
const tmp = { ...route }
if (hasPermission(roles,tmp)) {
if (tmp.children) {
tmp.children =filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
const state = {
routes: [],
addRoutes: [],
perms: []
}
const mutations = {
SET_ROUTES: (state, routes) = {
state.addRoutes = routes
state.routes =constantRoutes.concat(routes)
},
ADD_LOGIN_USER_INFO: (state, data) = {
state.perms = data
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve = {
const loadMenuData = []
// 先查询后台并返回左侧菜单数据并把数据添加到路由
getAuthMenu(roles).then(response = {
let data = response
if (response.code !==0) {
this.$message({
message:'菜单数据加载异常',
type:0
})
}else {
const permis = response.pers
data = response.menuList
console.log('==============加载===========')
Object.assign(loadMenuData,data)
generaMenu(asyncRoutes,loadMenuData)
const accessedRoutes =asyncRoutes || []
// accessedRoutes.push({ path: '*', component: () = import('@/views/error-page/404'), hidden: true })
commit('ADD_LOGIN_USER_INFO',permis)
commit('SET_ROUTES',accessedRoutes)
router.addRoutes(accessedRoutes)
resolve(accessedRoutes)
}
})
})
}
}
/**
* 后台查询的菜单数据拼装成路由格式的数据
* @param routes
*/
/* export function generaMenu(routes, data) {
data.forEach(item = {
let tempUrl = item.url
if (item.url === null) {
tempUrl = ''
}
const menu = {
path: item.url === null ? item.ename : item.url,
component: item.url === null ? Layout : resolve = require([`@/views${tempUrl}`], resolve),
children: [],
name: 'menu_' + item.menuId,
meta: { title: item.name, id: item.menuId, roles: ['admin'], icon: item.icon }
}
if (item.list) {
generaMenu(menu.children, item.list)
}
if (item.menuId !== -100) {
routes.push(menu)
}
})
}*/
export function generaMenu(routes, data) {
data.forEach(item = {
if (item.state ===0) {
let typeParentId =''
if (item.parentId ===0) {
typeParentId ='noRedirect'
}
let tempUrl = item.urlNew
if (item.urlNew ===null) {
tempUrl =''
}
if (item.parentId !==0 item.urlNew ===null) {
tempUrl ='/404'
item.urlNew ='/404'
}
let menu = {}
if (item.Identify ===1) {// 需铺满屏幕（隐藏左侧导航栏）
menu = {
path: item.urlNew ===null ? item.ename : item.urlNew,
hidden: item.type ===2,
children: [],
name:'menu_' + item.menuId,
redirect:typeParentId,
meta: {title: item.name,id: item.menuId,roles: ['admin'],icon: item.iconNew }
}
}else {
menu = {
path: item.urlNew ===null ? item.ename : item.urlNew,
component: item.urlNew ===null ? Layout : resolve = require([`@/views${tempUrl}`], resolve),
hidden: item.type ===2,
children: [],
name:'menu_' + item.menuId,
redirect:typeParentId,
meta: {title: item.name,id: item.menuId,roles: ['admin'],icon: item.iconNew }
}
}
if (item.list) {
generaMenu(menu.children, item.list)
}
routes.push(menu)
}
})
}
export default {
namespaced:true,
state,
mutations,
actions
}
Vue实战篇｜使用路由管理用户权限（动态路由）
权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。
跟着我一起来学vue实战篇路由管理权限吧!
getCurrentAuthority()函数用于获取当前用户权限，一般来源于后台数据
check()函数用于权限的校验匹配
isLogin()函数用于检验用户是否登备首录
路由配置元信息meta:{ authority: ["admin"] }
使用to.matched获取跳转路由的全部信息,包括父路由和子路由
使用lodash中的判高findLast匹配离跳转路由配置权限的元信息
引入auth.js中check()和isLogin()进行判断掘滚尺是否具有权限或是否已登录
如果没有权限则给出提示信息后跳转到403页面,未登录则返回登录页面
运行结果
当getCurrentAuthority()函数返回admin时，则菜单会显示所有元信息meta:{ authority: ["admin"] }的路由菜单；
如返回值为user时，菜单会显示所有元信息meta:{ authority: ["user"] }的路由菜单
接下来CrabFort会带大家一起实现更加精细化的权限设计（权限组件、权限指令）
vue 项目路由权限管理实现
项目基于 vue-element-admin 基础之上进行开发，感谢 花裤衩 以及为此项目做出贡献的大佬 [社会社会]！
路由数据由后端控制，前端调用接口返回数据；前端拿到数据处理成可使用的路由结构，然后渲染到页面。
为了能提供更多的功能，后端返回的数据结构是在原来菜单结构基础之上有所改动的。
原路由数据结构：
后端返回数据结构：
路由数据采用多级嵌套结构，基本可以满足需求。
拿到接口返回的数据之后还不能直接使用，需要经过一些处理。
在本地的开发，新增页面时，为了方便开发，获取到后端返回的数据之后用了一个方法来合并数据：
temporaryMenuArray 临时路由数组的结构需要跟后端返回的数据结构一致。
使用 setTemporaryMenu :
合并完临时的路由之后就开始进行路由的处理了。
从上面后端返回的数据结构中可以看出，已经和需要处理成的路由很像了，但还是有一些数据没有必要在专门的系统那里维护，所以需要一些其他数据的皮穗没处理：
routesComponents 为一个手动维护的页面路由文件：
得到的 userCanUseRouteModules 结构如下：
上面数据中的 type 为2、3层级的 component 已经被替换成对应页面的路由模块了。
得到 userCanUseRouteModules 之后，其中 name 为 storeManagement:head 的那一层数据是供头部菜单使用的，其 children 的数据才是需要添加的路由数据：
此时的 asyncRoutes 只放了默认匹配的路由，这个是需要放在所有路由的最后的：
至此对路由的处理结束。
处理路由这一步是放在 router.beforeEach 路由全局前置守卫里的，结合原有的逻辑进行了一些判断处理。
因为路由数据是由后端数据处理得到的，只包含和挂载了当前用户能有权限访问的部分，没有权燃纳限访问的路由就没有被 router.addRoutes 添加，所以并没有在路由守卫里对每次路由的跳转都进行校族陪验。
不要害怕调整路由器和WIFI设置。使用我们提供的指南和技巧，您可以轻松地自定义您的网络，以满足您的需求。
