c# 详细的介绍一下vue-element-admin框架的运行流程

Vue-Element-Admin 框架运行流程详解

Vue-Element-Admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案。下面我将从启动到渲染的完整流程进行详细介绍。

一、项目结构概览

vue-element-admin/
├── public/ # 静态资源
│ └── index.html # HTML模板
├── src/
│ ├── api/ # API接口请求
│ ├── assets/ # 静态资源(图片、样式)
│ ├── components/ # 公共组件
│ ├── directive/ # 自定义指令
│ ├── filters/ # 过滤器
│ ├── icons/ # SVG图标
│ ├── layout/ # 布局组件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex状态管理
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ ├── views/ # 页面视图
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .env.* # 环境变量
├── package.json # 依赖配置
└── vue.config.js # Vue CLI配置

二、启动流程

1. 入口文件执行 (main.js)

// main.js – 项目入口文件
import Vue from \’vue\’
import App from \’./App.vue\’
import router from \’./router\’ // 引入路由实例
import store from \’./store\’ // 引入Vuex状态管理
import \’./icons\’ // 注册SVG图标
import \’./permission\’ // 权限控制入口
import \’./styles/index.scss\’ // 全局样式

// 关闭生产环境提示
Vue.config.productionTip = false

// 创建Vue实例并挂载
new Vue({
router, // 注入路由
store, // 注入状态管理
render: h => h(App) // 渲染根组件
}).$mount(\’#app\’) // 挂载到index.html的#app元素

执行顺序：

2. 权限控制初始化 (permission.js)

// src/permission.js – 权限控制核心
import router from \’./router\’
import store from \’./store\’
import { Message } from \’element-ui\’
import NProgress from \’nprogress\’ // 进度条
import \’nprogress/nprogress.css\’
import { getToken } from \’@/utils/auth\’ // 获取token
import { isRelogin } from \’@/utils/request\’ // 重登录判断

NProgress.configure({ showSpinner: false })

// 白名单路由（不需要登录即可访问）
const whiteList = [\’/login\’, \’/auth-redirect\’, \’/register\’, \’/bind\’]

// 路由守卫 – 每次路由变化都会触发
router.beforeEach((to, from, next) => {
NProgress.start() // 开始进度条

// 设置页面标题
document.title = getPageTitle(to.meta.title)

const hasToken = getToken() // 检查是否有登录token

if (hasToken) {
// 已登录情况
if (to.path === \’/login\’) {
// 已登录访问登录页，跳转到首页
next({ path: \’/\’ })
NProgress.done()
} else {
// 检查是否已获取用户信息
const hasRoles = store.getters.roles && store.getters.roles.length > 0

if (hasRoles) {
// 已有角色信息，直接放行
next()
} else {
try {
// 获取用户信息
const { roles } = await store.dispatch(\’user/getInfo\’)

// 根据角色生成可访问的路由
const accessRoutes = await store.dispatch(\’permission/generateRoutes\’, roles)

// 动态添加路由
router.addRoutes(accessRoutes)

// 确保addRoutes完成，使用replace跳转
next({ …to, replace: true })
} catch (error) {
// 获取用户信息失败，清除token并跳转登录页
await store.dispatch(\’user/resetToken\’)
Message.error(error || \’Has Error\’)
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
// 未登录情况
if (whiteList.indexOf(to.path) !== -1) {
// 白名单路由，直接放行
next()
} else {
// 非白名单，跳转登录页
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})

// 路由完成后的钩子
router.afterEach(() => {
NProgress.done() // 结束进度条
})

权限控制流程：

用户访问路由
↓
检查是否有Token
↓
┌─────────────────┬──────────────┐
│ 有Token │ 无Token │
└────────┬────────┴──────┬───────┘
↓ ↓
检查是否有角色信息 检查是否在白名单
↓ ↓
┌────┴────┐ ┌────┴────┐
│ 有角色 │ │ 在白名单 │
└────┬────┘ └────┬────┘
↓ ↓
放行访问 放行访问
↓ ↓
┌────┴────┐ ┌────┴────┐
│ 无角色 │ │不在白名单│
└────┬────┘ └────┬────┘
↓ ↓
获取用户信息 跳转登录页
生成动态路由
添加路由到路由器

3. 路由配置加载 (router/index.js)

// src/router/index.js
import Vue from \’vue\’
import Router from \’vue-router\’

Vue.use(Router)

// 引入布局组件
import Layout from \’@/layout\’

// 常量路由（无需权限）
export const constantRoutes = [
{
path: \’/login\’,
component: () => import(\’@/views/login/index\’),
hidden: true
},
{
path: \’/\’,
component: Layout,
redirect: \’/dashboard\’,
children: [{
path: \’dashboard\’,
name: \’Dashboard\’,
component: () => import(\’@/views/dashboard/index\’),
meta: { title: \’Dashboard\’, icon: \’dashboard\’, affix: true }
}]
}
// … 更多常量路由
]

// 异步路由（需要权限）
export const asyncRoutes = [
{
path: \’/permission\’,