vue-element-admin框架根据登录⼈的⾓⾊动态切换路由控制展⽰⽬录
情景：项⽬是⽤vue-element-admin框架搭建的，因为登录⼈有⾓⾊，要求根据不同的⾓⾊要有不同的菜单⽬录结构，⼤致思路如下：
1 因为⼀开始我安装的是基础版本的，但是这个动态路由需要⽤到集成版本中store/modules/permission.js ⽂件，⽤于状态管理。
2 路由中会区分两种：⼀种是没有权限都可以访问的页⾯⽐如登录页⾯、404页⾯、默认访问页⾯等；还有⼀种就是需要根据⾓⾊访问的动态路由了例如：
// 都可以访问的路由
export const constantRoutes = [
{
path:'/404',
component:() => import('@/views/404'),
hidden:true
}
]
// 要根据⾓⾊才能访问的路由
export const asyncRoutes = [
{
path:'/homePage1',
component: Layout,
redirect: '/homePage1/page1',
// roles这个数组就是⾓⾊他可以取多个值⽤逗号分开
meta: { title: '主页1', icon: 'el-icon-s-help',roles:['admin] },
children:[
{
path: 'page1',
name: 'Page1',
component: () => import('@/views/page1'),
meta: { title: '页1', icon: 'el-icon-s-open',roles:['admin'] }
}
]
},{
path:'/homePage2',
component: Layout,
redirect: '/homePage2/page2',
meta: { title: '主页2', icon: 'el-icon-s-help',roles:['pm'] },
children:[
{
path: 'page2',
name: 'Page2',
component: () => import('@/views/page2'),
meta: { title: '页2', icon: 'el-icon-s-open',roles:['pm'] }
}
]
}
]
3 刚开始的初始页（可以在都可以访问的路由constantRoutes 中定义如path:’/’）要进⾏⼀个⾓⾊的判断，看他跳转到哪⼉个路由例如：
<script>
export default {
created() {
// 获取store 中存储的⾓⾊来判断路由的跳转
const role = this.$store.le;
if(role == 'admin') {
this.$place({path:'/homePage1'})
}else {
this.$place({path:'/homePage2'})
}
}
}
</script>
4 路由拦截，每次路由变化的时候都会经过⼀层拦截来确认他下⼀步的操作，⽂件是’@/permission.js’
const whiteList = ['/login']
router.beforeEach(async (to,from,next) => {
// 获取跳转的⽬录的名称
document.title = a.title)
// 看有⽆token
const hasToken = Item('token') ? true :false
if(hasToken) {
// 获取⾓⾊
const hasRole = this.$store.utes
if(hasRole && hasRole .length > 0) {
// 如果这个⼈有⾓⾊可以让他继续往下进⾏
next()
}else {
try {
const {userInfo} = await this.$store.dispatch('user/getInfo')
// 根据⾓⾊去触发状态管理获取到这个⾓⾊下的路径
accessRoutes = await this.$store.dispatch('permission/generateRoutes',[le])vue element admin
/
/ 然后把根据⾓⾊动态获取的路由合并到原来⽆⾓⾊也可以访问的路由上
router.addRoutes(accessRoutes)
// 然后继续往下执⾏，并替代当前的路径没有历史记录
next({ ...to, replace: true })
}catch(error) {
//  提⽰报错信息，去登录页⾯重新登录
<(error || 'Has Error')
next('/login')
}
}
}else {
/
/ 如果没有token ，看看要访问的路径是否在⽩名单中，如果在可以继续访问否则跳到登录页重新登录
if(whiteList.indexOf(to.path) !== -1) {
next()
}else {
next('/login')
}
}
})
5 因为⼀开始我安装的是基础版本的，所以在左侧菜单的⽬录结构页⾯在’@/layout/components/Sidebar/index’ 需要做⼀下修改
现在⽬录的绘制要跟着这个动态的路由变化。
这是我总结的⼏点动态路由的修改，后续有发现会继续更新！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。