vue中对于路由权限进⾏判断的⼏种⽅法（vue-element-admin）由于element多⽤来做后端管理界⾯，所以这⾥给⼤家推荐⼀个⽤来做后端管理的element框架！（vue-element-admin）
直接进⼊主题：
1.对路由跳转进⾏判断，如果符合权限就允许，反之就不⾏
2.对跳转页⾯进⾏逻辑请求判断，就是页⾯数据需要⼀定的权限才能发送请求（这样需要后端⼈员给你做，个⼈感觉不太
现实，后端估计想⼲你）
3.根据权限，动态⽣成对应的路由，什么权限拥有什么路由（vue-element-admin）就是这么做的，动态⽣成路由
常⽤⽅法⼀般都是：
----------- v-if + router.beforeEach() ----------
由于后端管理界⾯涉及到，对登陆⽤户的权限判断，可能做的好点的后端管理页⾯，要么把相对应的跳转事件进⾏隐藏或判断，或者把跳转页⾯进
v-if 判断，然后再在router.beforeEach()进⾏路由判断，这样就可以防⽌部分⽤户，⾏隐藏，我之前也是这样做的，对跳转的路由按钮进⾏ v-if
根据请求地址来实现跳转
-------------对跳转的按钮事件进⾏权限判断-------------
这样就⽐第⼀种⽅法更直接，对跳转页⾯的路由事件，添加⼀个⽅法，然后根据权限判断，if和else，满⾜就跳转，不满⾜就return，如果想要提升⼀下⽤户体验度，就弹出⼀个消息提⽰框，说您暂⽆权限！这是不是更简单
这样的⽅法，最直观，最简单，也最⽅便！但是呢，⽤户体验度不是很好，⽽且权限是写死的，不具备灵活性，但是并不妨碍这是⼀种好⽅法！！vue-element-admin根据权限动态⽣成路由的⽅式
学习了⼀下vue-element-admin这个后端管理框架后：我就觉得它的这种动态⽣成路由的⽅式很新颖，也很厉害，所以再踩了⼏个坑以后，就来记录⼀下
构建项⽬上：ts+vuex+cookie
思路：
第⼀步：
就是在你登陆以后，后端返回token，然后在请求成功的回调⾥⾯，⼜发送token去后端去获取当前⽤户的详细信息，信息中包括了你这名⽤户的权限，是否为管理员⾝份，还是次级管理员⾝份，然后将token存⼊cookie，将请求获取到的数据存⼊vuex！假设这个存储你权限的字段交roles，是个数组，类似：[’admin'] or ['Secondary']
第⼆步：
这⾥要说明的是，路由表中会定义两个路由表，⼀个为公共路由表，⼀个为动态路由表，公共路由表就是不需要权限也能去访问，动态路由表顾名思义就是需要权限去获取了！然后根据获取到你的权限之后，会根据roles中的字段，去遍历动态路由表中的对应的路由表，然后将符合条件的路由表保存起来
单个路由下⾯meta⾥⾯定义roles字段，和你获取到的权限尽量对应
第三步：最后将获取到的符合权限的路由，合并到固定路由下⾯，通过router.addRouter()，当然了这⾥还是要⽤到router.beforeEach（）去做路由判断，让权限更牢靠⼀点
具体实现⽅法：贴代码
获取⽤户信息和权限
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import { login,UserInfo } from '../../api/user'
import { getCookie,setCookie } from '../../utils/cookies'
import store from '@/store'
export interface usermodel{
username:string,
password:string,
token:string
}
@Module({ dynamic: true, store, name: 'user' })
class User extends VuexModule implements usermodel{
public username = ""
public password = ""
public token = getCookie('token') ||""
public roles:string[] = []
@Mutation
private SET_TOKEN(token:string){
}
@Mutation
private SET_ROLES(roles:string[]){
}
@Mutation
private SET_NAME(name:string[]){
}
@Action
public async Login(userInfo:{username:string,password:string}){ //登陸獲取token let { username,password } = userInfo
username = im()
const data = await login({username,password})
const { token } = data as any
setCookie('token',token)
this.SET_TOKEN(token)
}
@Action
public async getUserinfo(){ //根據token去獲取登陸⽤⼾個⼈信息，判斷個⼈權限
ken == ""){
console.log('token不存在或者已过期')
}
const {data} = await ken)
if(!data){
throw Error('未查到此⽤户，请重新登陆')
}
const { roles,name } = data
if(!roles || roles.length<=0){
throw Error('您不属于管理员范畴')
}
this.SET_ROLES(roles)
this.SET_NAME(name)
}
}
export const UserModel = getModule(User)
根据权限筛选对应路由
import { VuexModule,Module,Action,Mutation,getModule } from 'vuex-module-decorators'
import { asyncRoutes,constantRoutes } from '@/router'
import store from '@/store'
import { RouteConfig } from 'vue-router'
export interface IpermissionState{
routes:RouteConfig[],
dynamicRoutes: RouteConfig[]
}
const hasPermission = (roles:string[],route:RouteConfig)=>{ //判断动态路由中的meta中是否包含你当前⽤户的权限
a && les) {
return roles.some(role => les.includes(role))
}else{
return true
}
}
export const filterAsyncRoutes = (routes:RouteConfig[],roles:string[]):any=>{ //递归查询出动态路由中符合当前⽤户权限的路由
const res:RouteConfig[] = []
vue element adminroutes.forEach(route => {
const r = { ...route }
if(hasPermission(roles,r)){
if(r.children){
r.children = filterAsyncRoutes(r.children,roles)
}
res.push(r)
}
});
}
@Module({ dynamic: true, store, name: 'permission' })
class Permission extends VuexModule implements IpermissionState{
public routes:RouteConfig[] = []
public dynamicRoutes:RouteConfig[] = []
@Mutation
private SET_ROLES(routes:RouteConfig[]){ //合并固定路由和动态路由
this.dynamicRoutes = routes //获取到的所有的动态的路由
}
@Action
public GenerateRoutes(roles: string[]) {
let accessedRoutes
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论