Vue开发菜单权限与按钮权限管理
1.修改国际化语言为中文
// main.js
Vue.use(ElementUI)2.去除多余路由
// # router/index.js
// # 保留 login, dashboard3.关闭 Eslint 校验
// vue.config.js
lintOnSave: false,4.配置为自己的接口
// vue.config.js 中注释掉 mock接口， 添加自己的接口地址(跨域模式)
proxy: {
//配置跨域
'/api': {
// target: "https://demo.it98k.cn",
target: "http://localhost:8000",
// ws:true,
changOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
// before: require('./mock/mock-server.js')
// .env.development 修改 VUE_APP_BASE_API 为代理地址
VUE_APP_BASE_API = '/api'
4.配置为自己的请求路径
src/api 目录下新建 index.js
import request from '@/utils/request'
// 账号密码登陆接口
export function login(data) {
return request({
url: '/api/v1.0/auth/login',
method: 'post',
data
})
}
// 获取用户详情
export function getInfo(data) {
return request({
url: '/api/v1.0/user/info',
method: 'get',
data
})
}
// 获取所有的菜单接口
export function getMenusRouter() {
return request({
url: '/api/v1.0/menus',
method: 'get',
})
}// src/store/modules/user.js 文件内
// import { logout,getInfo, logout } from '@/api/user' 注释
import { login, getInfo, getMenusRouter } from '@/api/index'5.修改状态码和 Token 方式
// src/utils/requests.js
config.headers['X-Token'] = getToken()
2000 ---> 2006.登录接口数据
{
"code": 200,
"data": {
"token": "eyJhbGciOiJIUzUxMiIsImlhdCI6MTY0OTI0MDc0MSwiZXhwIjoxNjQ5MjUwNzQwfQ.eyJpZCI6MX0.g8o6EJ24MaXTJflX2PKlrMhytbEx3tqsfAHKy8j4cd5ATEA2quz2Z5dw71avAZCV-yTV_uOtHOMeIc6GF3OGFg"
},
"msg": "ok"
}7.个人信息接口数据
{
"code": 200,
"data": {
"avatar": "http://r9uo1b8p9.hn-bkt.clouddn.com/20220405142630802.jpg",
"description": "超级管理员",
"id": 1,
"username": "admin"
},
"msg": "ok"
}8.菜单渲染接口数据
{
"code": 200,
"data": [
{
"children": [
{
"component": "system/menus/index",
"icon": "el-icon-platform-eleme",
"id": 2,
"is_enabled": true,
"is_show": true,
"meta": {
"icon": "el-icon-platform-eleme",
"title": "菜单管理"
},
"name": "menus",
"path": "/system/menus",
"pid": 1,
"roles": [
{
"icon": "el-icon-platform-eleme",
"id": 5,
"is_enabled": true,
"is_show": true,
"permissions": "add",
"pid": 2,
"sort": 1,
"title": "新增",
"type": 3
},
{
"icon": "el-icon-platform-eleme",
"id": 6,
"is_enabled": true,
"is_show": true,
"permissions": "edit",
"pid": 2,
"sort": 2,
"title": "编辑",
"type": 3
}
],
"sort": "1",
"title": "菜单管理",
"type": 2
},
{
"component": "system/users/index",
"icon": "el-icon-platform-eleme",
"id": 3,
"is_enabled": true,
"is_show": true,
"meta": {
"icon": "el-icon-platform-eleme",
"title": "用户管理"
},
"name": "users",
"path": "/system/users",
"pid": 1,
"roles": [],
"sort": "2",
"title": "用户管理",
"type": 2
},
{
"component": "system/roles/index",
"icon": "el-icon-platform-eleme",
"id": 4,
"is_enabled": true,
"is_show": true,
"meta": {
"icon": "el-icon-platform-eleme",
"title": "角色管理"
},
"name": "roles",
"path": "/system/roles",
"pid": 1,
"roles": [],
"sort": "3",
"title": "角色管理",
"type": 2
}
],
"component": "Layout",
"icon": "el-icon-platform-eleme",
"id": 1,
"is_enabled": true,
"is_show": true,
"meta": {
"icon": "el-icon-platform-eleme",
"title": "系统管理"
},
"path": "/system",
"pid": 0,
"redirect": "0",
"sort": "1",
"title": "系统管理",
"type": 1
}
],
"msg": "ok"
}9.实现菜单渲染
9.1 导入组件方式设置
src/router 目录下创建两个文件
[root@k3s-master router]# pwd
/usr/local/src/vue-admin-template/src/router
[root@k3s-master router]# tree
.
├── _import_development.js
├── _import_production.js
└── index.js// _import_development.js
// 开发环境导入组件
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
// _import_production.js
// 生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')9.2 设置请求菜单接口
// src/store/modules/user.js
const mutations = {
'''略，添加如下存储
SET_MENU: (state, menus) => {
state.menus = menus
}
}
// 获取菜单，调用的接口
getMenusRouter({ commit, state }) {
return new Promise((resolve, reject) => {
getMenusRouter().then(response => {
const { data } = response
data.push({
path: "/404",
component: "404",
hidden: true
}, {
path: "*",
redirect: "/404",
hidden: true
})
commit('SET_MENU', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// src/permission.js ， 获取个人信息后，请求菜单数据
.....
await store.dispatch('user/getInfo')
// get user menus (下面新增)
await store.dispatch('user/getMenusRouter')
if (store.getters.menus < 1) {
global.antRouter = []
next()
}
const menus = filterAsyncRouter(store.getters.menus) //过滤路由
router.addRoutes(menus) //动态添加路由
global.antRouter = menus //将路由数据传递给全局变量，做侧边栏渲染的工作
next({ ...to, replace: true }) //正常走
......9.3 处理后端返回的菜单数据
小计： 如果不知道数据渲染格式的话，可以去 **router/index.js ** 里查看摸版路由的格式
// src/permission.js
// 遍历后台传来的路由菜单数据，转换为组件对象
import Layout from "@/layout";
const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
function filterAsyncRouter(asyncRouterMap) {
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') {
route.component = Layout
} else {
try {
route.component = _import(route.component) // 导入组件
} catch (error) {
// route.component = _import('system/menus/index') // 导入组件
Message.error('请查看控制台修改或者删除不存在的组件路径') //弹出异常('请修改或者删除不存在的组件路径')
}
}
}
// 判断是否有子级目录和长度是否大于0， 并且不是按钮(type=3 代表按钮)
if (route.children && route.children.length && route.children.type != 3) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}9.5 修改菜单渲染方式
// src/layout/components/Sidebar/index.vue
// return this.$router.options.routes 注释，修改为如下
return this.$router.options.routes.concat(global.antRouter);9.6 添加组件
// src/views/
[root@k3s-master views]# tree system
system
├── menus
│ └── index.vue
├── roles
│ └── index.vue
└── users
└── index.vue
// index.vue 内容如下
<template>
<div>menus roles users</div>
</template>
9.7 效果如下
Last updated