Vue router 权限整理_vue router permission-CSDN博客

本文链接：https://blog.csdn.net/qq_45104888/article/details/107819143

本文介绍了Vue Router的权限控制思路与实现，通过菜单与路由分离，后端返回权限信息，动态添加路由。利用router.beforeEach进行界面权限控制，并通过axios拦截处理请求响应。示例中展示了不同权限用户的界面展示差异。

摘要由CSDN通过智能技术生成

Vue router 权限整理

权限控制方式与思路与实现

权限控制方式与思路与实现

首先我们把权限分为几部分,大体方式如下图所示：
在这里插入图片描述
下面根据一个小demo展开
demo下载地址
这里采用菜单与路由分离，菜单由后端返回的方式实现

实现思路：
简单说就是设置俩份路由表，一份基础路由，一份权限路由保存在后端，根据用户登录权限返回router.addRoutes() 动态添加，根据这份路由权限信息可以对菜单和按钮进行管理；界面权限可通过router.beforeEach 跳转实现，请求/响应可通过axios拦截实现；

导航钩子相关笔记

先上代码：
登录块（这里模仿登录返回相关值）

login() {
   
            let obj = check.loginCheck(this.account, this.password )
              if(obj.state){
   
                  this.$message({
   message: '登录成功', type: 'success'})
                  //修改store中返回路由列表与token
                  this.$store.commit('setRouList', JSON.stringify(obj.list))
                  this.$store.commit('setToken', obj.token)
                  //设置本地路由与token值 - 刷新时store清空使用
                  localStorage.setItem("setRouList", JSON.stringify(obj.list))
                  localStorage.setItem("tk", obj.token);
                  getRoutes()
                  router.push({
    path: '/home' })
              }else {
   
                  this.$message.error('失败登录')
                  router.push({
    path: '/' })
              }

在这里插入图片描述
登录界面

Vuex store内容

state: {
   
    routerList: localStorage.getItem("setRouList"), //路由表
    tokens: localStorage.getItem("tk"), //用