vue3用户权限管理（路由控制等）1_vue3 静态路由 权限

在前端开发的过程中，我们需要做前端的权限管理，我们需要根据后端提供的信息来控制权限，这时候就需要根据用户的操作来进行权限控制了。逻辑稍微有一点绕，多理解就好了。

用户路由权限管理

        大致的实现原理：

                一般将路由分为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路由给捕获了，就不会走我们的动态添加路由了。

稍微有一点绕，多看下理解就好了。