前言
总结一种比较常见的权限控制方法,主要使用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&#