一般用于后台管理系统,登陆成功后台返回可用路由,将router的路由进行匹配,对用户进行限制
分3个板块
-
账号管理(account)
给账号绑定角色(多选),一个账号可绑定多个角色
-
角色管理(role)
设定角色:例如超级管理员,普通用户,给角色配置菜单权限,将菜单列表以树状图结构返回,利用element的tree组件展示,勾选上哪个菜单就表示有权限进入这个页面
-
菜单管理(menu)
菜单列表添加你后台管理系统router配置的每个path名称,
登录后根据返回的权限路由(menus)与router配置递归比较修改meta.show=true(自定义)这样就可以控制导航菜单显示,将返回的menus储存,在路由拦截调取,并判断当前要跳转的路由是否在权限内,否则不跳转并提示
在login.vue中
登录成功后后台返回路由信息
import routes from '../router/routes'
export default {
data() {
return {
form: {
password: '',
account: ''
},
routerArr: []
}
},
methods: {
login() {
if (this.form.account == '') {
this.$message.error('请输入账号')
return false
}
if (this.form.password == '') {
this.$message.error('请输入密码')
return false
}
this.$api.login(this.form).then((data) => {
if (data.code == 200) {
let menus = data.data.menus
localStorage.setItem('menu', JSON.stringify(menus))
let arr = []
for (let i in menus) {
arr.push(menus[i].path)
}
arr = arr.join(',')
localStorage.setItem('menusRouter', arr)
localStorage.setItem('accessToken', data.data.accessToken)
this.mapRoot(menus, routes[1].children)
}
})
},
mapRoot(arr, routerArr) {
for (let i in routerArr) {
for (let j in arr) {
if (
routerArr[i].path == arr[j].path &&
routerArr[i].path != ''
) {
if (routerArr[i].meta.isMenu != undefined) {
routerArr[i].meta.isMenu = true
}
break
}
}
if (routerArr[i].children && routerArr[i].children.length > 0) {
this.mapRoot(arr, routerArr[i].children)
}
}
this.$router.push({ path: '/main' })
}
}
}
这是我router.js配置部分代码
{
path: 'groupQuesList',
name: 'groupQuesList',
component: () => import('@/views/topic/groupQuesList.vue'),
meta: {
isMenu: false,//true为显示在导航,默认全是false
icon: 'el-icon-edit-outline',
title: '组试题'
}
},
{
path: 'groupBangTi',
name: 'groupBangTi',
component: () => import('@/views/topic/groupBangTi.vue'),
meta: {
title: '组-绑定试题' //不显示在导航的页面不要设置isMenu
}
}
如有写的不明白的地方请在下方留言