从零开始Vue3+Element Plus后台管理系统(18)——权限路由实现

最新推荐文章于 2026-05-04 10:48:25 发布

原创

最新推荐文章于 2026-05-04 10:48:25 发布 · 1.6k 阅读

标签

#数学建模

文章介绍了在Vue.js应用中实现路由权限的三种模式：前端固定路由、前端动态路由和后端动态路由。通过权限过滤菜单和显示，以及全局前置守卫处理导航，确保用户只能访问有权限的页面。同时，文章强调了在项目开发中进行总结和回顾的重要性，以促进个人成长。

一开始打算做两种模式的路由权限，最后还是分成了3种，分别是：

前端固定路由，所有路由是固定的，通过权限过滤菜单和显示
前端动态路由，通过权限过滤路由表和菜单
后端动态路由，获取接口返回数据，挂载路由表和菜单

VITE_PERMISSION_MODE = 'CONSTANT'
# VITE_PERMISSION_MODE = 'FRONT'
# VITE_PERMISSION_MODE = 'BACK'

因为权限配置灵活，实际工作中一般采用第3种。在个人demo或者权限简单的项目中，第一种也够用。

简要流程

下图是一个简单流程说明，主要在路由的全局前置守卫router.beforeEach体现。

各个模块的路由对应views，分文件放在router/modules，方便后面统一使用

路由入口文件 router/index.ts

存放系统固定的几个路由（登录、注册、403、404…)

const constantRoutes: RouteRecordRaw[] = [
  {
   
   
    path: '/',
    name: 'Home',
    redirect: '/dashboard',
    hidden: true,
    meta: {
   
   
      title: 'home'
    }
  },
  {
   
   
    path: '/login',
    name: 'Login',
    hidden: true,
    meta: {
   
   
      title: 'signIn'
    },
    component: () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')
  },
  {
   
   
    path: '/403',
    name: '403',
    hidden: true,
    meta: {
   
   
      title: '没有权限'
    },
    component: () => import(/* webpackChunkName: "400" */ '../views/403.vue')
  }
]
const lastRoutes = [
  {
   
   
    path: '/:pathMatch(.*)*',
    name: '404',
    hidden: true,
    meta:

最低0.47元/天解锁文章