14. 多角色登录（Vue-Router路由守卫）

2052 字约 5 分钟读完2318 次阅读更新于 2026/5/3

<router-view />

修改 vue 框架的内容

修改 HomevView.vue 为 Manager.vue

<!--        主体区域-->
<el-main>
  <router-view />
</el-main>

修改路由 router/index.js

{
  path: '/',
  name: 'Manager',
  component: () => import('../views/Manager.vue'),
  redirect: '/home',  // 重定向到主页
  children: [
    { path: 'home', name: 'Home', component: () => import('../views/Home') }
  ]
},

如何添加一个新的菜单和页面

新建一个 User.vue

<template>
  <div>
    用户信息
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {}
  },
  created() {

  },
  methods: {}
}
</script>

<style scoped>

</style>

添加一个新的路由

children: [
  { path: 'user', name: 'User', component: () => import('../views/manager/User') },
]

添加一个新的菜单

<el-submenu index="info">
  <template slot="title">
    <i class="el-icon-menu"></i>
    <span>信息管理</span>
  </template>
  <el-menu-item index="/user">用户信息</el-menu-item>
</el-submenu>

如何设置多角色登录

在 user 表添加一个新的角色字段 role

设置 2 种角色

在后台的 User 类里面加一个新的字段叫 role，然后重启后台

在菜单的标签上加一个 v-if 就可以了

路由守卫解决用户页面权限问题

router.beforeEach((to, from, next) => {
  // to 是到达的路由信息
  // from 是开源的路由信息
  // next 是帮助我们跳转路由的函数
  let adminPaths = ['/user']
  let user = JSON.parse(localStorage.getItem('honey-user') || '{}')

  if (user.role !== '管理员' && adminPaths.includes(to.path)) {
    // 如果当前登录的用户不是管理员，然后当前的到达的路径是管理员才有权限访问的路径，那这个时候我就让用户去到一个没有权限的页面，不让他访问实际的页面
    next('/403')
  } else {
    next()
  }
})