vue-router 登录拦截(前置)、动态注册路由。
npm i admin-router-plus --save
备注:
- 插件依赖
vue-router
(路由),需在注册vue-router
之后注册。 - 登录拦截(前置):判断
cookie
中的token
是否不为空,否则将被拦截至登录页。 - 动态路由子路由路径
path
不能以/
开头,否则将会被注册为顶级路由。 - 无需登录鉴权路由需配置
meta: { noAuth: true }
, 否则将被拦截跳转到登录页。
export declare interface RouterConfig {
loginPath?: string // 登录页路径,默认/login
enableDynamic?: boolean, // 是否开启动态路由
modules?: Record<string, any>; // 导入所有动态页面文件
routesRequest?: () => Promise<DynamicRoute[]>; // 动态路由请求(跳转到首个鉴权路由触发)
}
export declare interface DynamicRoute {
parent?: string; // 挂载父级(父级name属性值,顶级路由置空/0)
path: string; // 路由地址
name: string; // 路由名称
redirect?: string; // 路由重定向
component: string; // 页面文件名
meta?: Record<string, unknown> // 路由元信息
isDynamic?: boolean; // 动态路由标识(自动添加)
children?: DynamicRoute[]; // 子路由
}
main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import RouterPlus from 'admin-router-plus'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(RouterPlus, {
enableDynamic: true, // [可选]开启动态路由
modules: import.meta.glob(`./views/**`), // [可选]引入所有页面文件
routesRequest: async () => {
const res = await getJSON('/menu/routes')
return res.data
}, // 动态路由请求接口
})
app.mount('#app')
动态路由接口响应 json 数据
[
{
"parent": "",
"path": "/",
"name": "layout",
"redirect": "/company",
"component": "LayoutView",
"children": [
{
"parent": "layout",
"path": "company",
"name": "company",
"redirect": "/company/user",
"component": "Empty",
"meta": { "title": "公司管理" },
"children": [
{
"parent": "company",
"path": "user",
"name": "user",
"component": "UserView",
"meta": { "title": "员工管理" }
},
{
"parent": "company",
"path": "department",
"name": "department",
"component": "DepartmentView",
"meta": { "title": "部门管理" }
}
]
}
]
}
]
等同于 router.ts 如下:
import { createRouter, createWebHistory } from 'vue-router'
const Empty = () => import('../views/Empty.vue')
const NotFound = () => import('../views/NotFound.vue')
const LayoutView = () => import('../views/LayoutView.vue')
const router = createRouter({
history: createWebHistory(),
routes: [
// 静态路由
{
path: '/login',
name: 'login',
meta: { noAuth: true, noCache: true },
component: () => import('../views/LoginView.vue'),
},
// 等同动态路由添加内容
{
path: '/',
name: 'layout',
redirect: '/company',
component: LayoutView,
children: [
{
path: 'company',
name: 'company',
redirect: '/company/user',
meta: { title: '公司管理' },
component: Empty,
children: [
{
path: 'user',
name: 'user',
meta: { title: '用户管理' },
component: () => import('../views/UserView.vue'),
},
{
path: 'department',
name: 'department',
meta: { title: '部门管理' },
component: () => import('../views/DepartmentView.vue'),
},
],
},
],
},
// 包含动态路由时需最后添加
{
path: '/:pathMatch(.*)',
name: '404',
component: NotFound,
},
],
})
export default router