在前端开发的过程中,我们需要做前端的权限管理,我们需要根据后端提供的信息来控制权限,这时候就需要根据用户的操作来进行权限控制了。逻辑稍微有一点绕,多理解就好了。
用户路由权限管理
? ? ? ? 大致的实现原理:
? ? ? ? ? ? ? ? 一般将路由分为2种,一种是静态路由,就是所有的账号都可以访问的路由,比如登录,比如主页等,还有一种是动态路由,就是我们需要做权限判断的路由。实现逻辑是,当我们登录完成后,获取到token,用token去接口请求,获取权限路由信息,在将路由信息存储到vuex中,然后在路由前置守卫里判断,去筛选,那我们在vuex中存储的权限信息去匹配我们拆分的动态路由,然后将整合的路由通过router.addroute将动态路由添加到前端路由里面,这样就实现了前端路由权限管控。
? ? ? ? 我们建3个租价,一个主页组件,一个登录组件,还有一个404页面,其中登录组件是我们的静态组件,代表着所有用户都有权限访问
? ? ? ? 在路由配置文件里,新建一个文件,在里面放我们的动态路由。
????????
? ? ? ? ?在组件中把我们的动态组件放进去(主页组件,404组件)
? ? ? ? 后面我会讲为什么也要把404组件放在动态组件里面去。
export default [
{
path: "/", //主页组件
name: "home",
component: () => import("@/views/HomeView.vue"),
},
{
path: "*", //404组件
name: "notfound",
component: () => import("@/views/NotFound.vue"),
},
];
? ? ? ? 静态组件就是每个账号都有的权限,正常在router文件夹下的index里写即可。
? ? ? ? 如何下载vuex我就不过多的说了,在vuex的state里建一个role来存储数据,然后在actions里请求权限接口,将接口返回的权限数据存放在role里,代码如下
import { createStore } from 'vuex'
export default createStore({
state: {
role:""
},
getters: {
},
mutations: {
setrole(state,data){
state.role = data
}
},
actions: {
async getrole({commit}){
const role = ["/","*"] //这一步是请求接口,接口返回一个权限数组,这里我用一个变量代替
commit("setrole",role) //将权限数组通过mutations修改state里的role数据
}
},
modules: {
}
})
? ? ? ??
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Login from '../views/LoginIndex.vue'
import asyncrouter from "./trends" //1.导入动态路由
import store from '@/store' //2.导入vuex配置
const routes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'login',
component: Login
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach(async(to,from,next)=>{
//这里写简单的登录判断逻辑,我就不细写了
if(1){ //3.判断token存在
await store.dispatch("getrole") //4。调用vuex的方法,在vuex里请求接口获取权限列表
if(to.path=="/login"){//5.有token的情况下,如果走登录路由,给重定向到/路由
next("/")
}else{ //6.如果他不走登录,我们就判断他是不是走其他不存在的路由
if(to.path == null){ //7.这里通过to.path是否为空来确定他是不是走的不存在的路由
let f=asyncrouter.filter(item=>item.path.includes(store.state.role)) //9。判断走的是不存在的路由,这里直接调取vuex的role和我们定义的动态路由做筛选
//把在动态路由中符合我们 ["/","*"] 的给筛选出来
for(let i=0;i<f.length;i++){ //10,通过循环,给动态路由给添加进去
router.addRoute(
f[i]
)
}
next({...to,replace:true}) //11.这里是为了预防,我跳转路由在添加路由之前,就让他一直重复跳,知道正确的进去到我们天啊及的动态路由
}else{
next()
}
}
}else{
if(to.path=="/login"){
next()
}else{
next("/login")
}
}
})
export default router
代码里关键的地方都有注释,应该能看懂
这里我解释下:以为vuex和router.addroute都有一个特性,就是刷新会丢失,所以我们要把他放在路由前置守卫里,他丢失不怕,我们在每次跳转路由前都重新请求一遍,在把他给获取下来。
第二就是,为什么要把404也放到动态路由里面,这里是因为,我们在上面的逻辑中,当访问一个不存在的路由的时候,我们就通过动态路由方法来添加路由。如果,我们把404放在一静态路由里面的话,就会出现一个问题,当我们访问一个不存在的路由的时候,就被404路由给捕获了,就不会走我们的动态添加路由了。
稍微有一点绕,多看下理解就好了。