在前端开发的过程中，我们需要做前端的权限管理，我们需要根据后端提供的信息来控制权限，这时候就需要根据用户的操作来进行权限控制了。逻辑稍微有一点绕，多理解就好了。
用户路由权限管理
大致的实现原理：
一般将路由分为2种，一种是静态路由，就是所有的账号都可以访问的路由，比如登录，比如主页等，还有一种是动态路由，就是我们需要做权限判断的路由。实现逻辑是，当我们登录完成后，获取到token，用token去接口请求，获取权限路由信息，在将路由信息存储到vuex中，然后在路由前置守卫里判断，去筛选，那我们在vuex中存储的权限信息去匹配我们拆分的动态路由，然后将整合的路由通过router.addroute将动态路由添加到前端路由里面，这样就实现了前端路由权限管控。
1，新建组件
我们建3个租价，一个主页组件，一个登录组件，还有一个404页面，其中登录组件是我们的静态组件，代表着所有用户都有权限访问
编辑
2，拆分动态路由
在路由配置文件里，新建一个文件，在里面放我们的动态路由。
编辑
在组件中把我们的动态组件放进去（主页组件，404组件）
后面我会讲为什么也要把404组件放在动态组件里面去。
export default [ { path: "/", //主页组件 name: "home", component: () => import("@/views/HomeView.vue"), }, { path: "*", //404组件 name: "notfound", component: () => import("@/views/NotFound.vue"), }, ];
3,创建静态组件
静态组件就是每个账号都有的权限，正常在router文件夹下的index里写即可。
编辑
4.通过vuex来存储后端返回的权限信息
如何下载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: { } })
5.路由里使用路由前置导航，将vuex里的数据添加入动态路由里面
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路由给捕获了，就不会走我们的动态添加路由了。
稍微有一点绕，多看下理解就好了。
