Vue Router 导航守卫实现权限控制 - 完善的路由配置示例

import { createRouter, createWebHistory } from 'vue-router';import Home from '@/views/Home.vue';import teacherHome from '@/views/teacherHome.vue';import userHome from '@/views/userHome.vue';import notfound from '@/views/error.vue';const router = createRouter({ history: createWebHistory(import.meta.BASE_URL), routes: [ { path: '/', redirect: '/Login', }, { path: '/home', name: 'home', component: Home, meta: { requiresAuth: true, roles: ['admin'] }, children: [ { path: 'user', name: 'user', children: [ { path: 'addUser', name: 'addUser', component: () => import('@/views/admin/user/addUser.vue'), }, { path: 'removeUser', name: 'removeUser', component: () => import('@/views/admin/user/removeUser.vue'), }, ] }, { path: 'teacher', name: 'teacher', children: [ { path: 'addTeacher', name: 'addTeacher', component: () => import('@/views/admin/teacher/addTeacher.vue'), }, { path: 'searchTeacher', name: 'searchTeacher', component: () => import('@/views/admin/teacher/searchTeacher.vue'), }, { path: 'searchTeachList', name: 'searchTeach', component: () => import('@/views/admin/teacher/searchTeachList.vue'), }, ] }, { path: 'study', name: 'study', children: [ { path: 'python', name: 'python', component: () => import('@/views/admin/study/python.vue'), }, { path: 'CPluses', name: 'CPluses', component: () => import('@/views/admin/study/CPluses.vue'), }, { path: 'graphical', name: 'graphical', component: () => import('@/views/admin/study/graphical.vue'), }, ] }, { path: 'classType', name: 'classType', component: () => import('@/views/admin/classType/type.vue'), }, { path: 'classRoom', name: 'classRoom', component: () => import('@/views/admin/classRoom/room.vue'), }, { path: 'adminInfo', name: 'adminInfo', component: () => import('@/views/admin/adminInfo/adminInfo.vue'), } ] }, { path: '/teacherhome', name: 'teacherhome', component: teacherHome, meta: { requiresAuth: true, roles: ['teacher'] }, }, { path: '/userhome', name: 'userhome', component: userHome, meta: { requiresAuth: true, roles: ['user'] }, }, { path: '/Login', name: 'Login', component: () => import('@/views/login/Login.vue') }, { path: '/register', name: 'register', component: () => import('@/views/login/register.vue') }, { path: '/403', name: 'NotFound', component: notfound, } ]});router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); const roles = localStorage.getItem('roles'); if (to.meta.requiresAuth && !token) { alert("请先登录！"); next('/login'); } else if (to.meta.roles && to.meta.roles.includes(roles)) { if (roles === "admin") { alert("欢迎您管理员！"); next('/home'); } else if (roles === "teacher") { alert("欢迎您的到来优秀教师非你莫属！"); next('/teacherHome'); } else if (roles === "user") { alert("精英教育欢迎您！"); next('/userHome'); } } else { next('/403'); } });export default router;