附上girhub 地址:

loever/vue-FlexPaperViewer​github.com

qq:3179689033 相互学习

我把router.js 分成router.js 和routes.js 两个文件

routes.js 页面存放 公共路由 角色路由 设置用户角色路由权限

const asyncRoutes = [{ //这里按角色份路由权限
path: "/",
component: () => import('./views/index.vue'), //这里用动态加载路由 按需加载 这样没有权限的路由就不用加载
meta: {
requireAuth: true,
roles: ['page1'] // 区分权限 这是账号A
},
children: [{
path: "/",
component: () => import('./views/indexpage.vue'),
name:'首页',
meta: {
requireAuth: true,
}
},
{
path: "/page1",
component: () => import('./components/page1/page1.vue'),
name:'账号A 1页面',
meta: {
requireAuth: true,
}
},
]
},
{
path: "/",
component: () => import('./views/index.vue'),
meta: {
requireAuth: true,
roles: ['page2'] // 这里是账号B
},
children: [{
path: "/",
component: () => import('./views/indexpage.vue'),
name:'首页',
meta: {
requireAuth: true,
}
},
{
path: "/page2",
component: () => import('./components/page2/page2.vue'),
name:'账号B 1页面',
meta: {
requireAuth: true,
}
},
]
}
]

router.js 页面 正常的添加路由 添加beforEach 路由导航 判断角色 根据角色 渲染不用页面的路由菜单

router.beforeEach((to, from, next) => {var user = sessionStorage.getItem('user') //这个判断token 我没有token 先用 user 代替var user = sessionStorage.getItem('user') // 获取账号权限 用户角色
if (to.path=='/login') { // 如果进的是登录页面 就直接进去
next() // 这一步非常重要 没有这一步就会在 登录页死循环
} else {
if (user) { //判断是否登录
if (user) { //判断是否需要权限
if (store.state.addRoutes.length <= 0) { //判断是否刷新了页面const newRoutes = asyncRoutes.filter(route => route.meta.roles.includes(user)) //从asyncRoutes 获取 当前账号的路由权限
// 提交给mutation asyncRoutes
router.addRoutes(newRoutes) // 动态的加载 newRoutes 路由权限
store.commit('setAddRoutes', newRoutes) // 吧路由权限存一份 方便判断用户是否刷新了页面
next(to.fullPath) // 用户刷新了页面 在跳回去
}
next()
} else {
next('/login')
}
} else {
next('/login') // 没有登录 返回登录页面
}
}
})

在展示路由的地方