vue 后台重定向不成功_基于vue的简单权限管理实现总结

前言

总结一种比较常见的权限控制方法，主要使用vue-router的addRoutes根据用户权限动态添加路由实现。本文主要在前端对权限进行配置。 主要是看过vue-element-admin后对前端权限设计的一些总结
完整demo地址

主要知识点

• vue
• vue-router
• vuex
• vue-cli

基本项目项目结构

使用vue-cli生成项目

• 目录结构

├─public
│      favicon.ico
│      index.html
│      
└─src
    │  App.vue
    │  main.js
    │  
    ├─assets
    │      logo.png
    │      
    ├─components
    │      HelloWorld.vue
    │      
    ├─router
    │      index.js
    │      
    ├─store
    │  │  index.js
    │  │  
    │  └─modules
    │          permission.js
    │          user.js
    │          
    └─views
            About.vue
            Home.vue
            Login.vue
│  babel.config.js
│  package.json

• 主要文件
• src/router/index.js
• src/store/user.js
• src/store/permission.js

权限设计基本原理

• 基本原理

根据后台返回的用户角色信息在前端配置当前用户可以访问的路由，然后通过addRoutes动态添加。

• 后台返回的用户信息

{
    
    username:"张三",
    role:["admin","kefu"] //用户的角色
}

实现

配置router（src/router/index.js）

1.routes 配置不需要权限的基础路由如登陆页面，404页面等。如：

export const routes = [
  {
    
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue&#