</el-submenu>
<!-- 一级菜单 -->
<el-menu-item v-if="!item.children"
:index="item.url">
<i :class="['icon',item.iconCls]"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</aside>
<!-- ... -->
</template>
<script>
export default {
// ...
computed: {
// 从 Vuex 中获取导航菜单
nav() {
return this.$store.state.nav;
}
}
// ...
}
</script>
2. 路由切换前进行鉴权
路由定义的部分代码，对每个路由添加了 meta 属性，用于鉴权。
这里 component 采用了异步引入的方式。
定义路由
// ...
// 系统管理
{
path: '/system',
component: Main,
name: '系统管理',
redirect: '/system/organization',
children: [{
path: '/system/organization',
component: () => import ('@/views/System/Organization.vue'),
name: '组织结构',
// requiresAuth 用于确认此地址是否需要验证
// alias 用于获取后端返回rbac权限对应的前端路由地址和导航菜单图标
meta: {requiresAuth: true, alias: 'Pmsadmin/Oragnize/list'}
},
{
path: '/system/user',
component: () => import ('@/views/System/User.vue'),
name: '人员管理',
redirect: '/system/user/index',
children: [
{
path: '/system/user/index',
component: () => import ('@/views/System/UserList.vue'),
name: '职员列表',
meta: {requiresAuth: true, alias: 'Pmsadmin/Admin/list'}
}
] },
{
path: '/system/auth',
component: () => import ('@/views/System/Auth.vue'),
name: '角色管理',
meta: {requiresAuth: true, alias: 'Pmsadmin/Role/list'}
}
]}
// ...
路由钩子 beforeEach
router.beforeEach((to, from, next) => {
document.title = `${configs.title} - ${to.name}`;
const {hasAuth, auth} = store.state.user;
// 未拿到权限，则获取
if (!hasAuth) {
store.dispatch('getUserAuth');
console.log('重新获取用户权限');
// next();
}
// 如果未登录，跳转
if (window.localStorage.getItem('IS_LOGIN') === null && to.path !== '/login') {
console.log('未登录状态');
next({
path: '/login',
query: {redirect: to.fullPath}
// 将跳转的路由path作为参数，登录成功后跳转到该路由
})
} else {
// 需要鉴权的路由地址
console.log(to, auth.indexOf(to.meta.alias), auth);
if (to.meta.requiresAuth) {
if (auth.indexOf(to.meta.alias) > -1) {
