一般后台管理系统都会有管理员和普通用户的区分,所以要做权限控制
思路
- 创建公用页面login,可以让用户进行登录操作,根据用户信息对应的身份,匹配不同的权限模块
- 在路由前置钩子进行身份验证拦截,将拦截条件分为 白名单(不做拦截)、登录态未登录、登录态已登陆
- 路由注册分为两步,公用页面直接注册,权限路由根据登录用户的身份来注册
- 解决路由层级过深会导致keep-alive不缓存问题
实现
- 安装依赖
"dependencies": {
"nprogress": "^0.2.0",
"vue-router": "^4.0.6"
}
- 在src目录下创建配置文件config,统一管理一些设置信息 新建setting.config.js
export const title: string = '风控管理平台'
export const titleSeparator: string = ' - '
export const titleReverse: boolean = true
export const keepAliveMaxNum: number = 20
export const routerMode: 'hash' | 'history' = 'hash'
export const routesWhiteList: string[] = [
'/login',
'/login/vip',
'/404',
'/403'
]
export const loginInterception: boolean = true
- 在src目录下创建router文件夹,新建index.ts router.ts
import {
createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
import {
loginInterception, routerMode, routesWhiteList, title, titleReverse } from '@/config/setting.config'
import Layout from '@/views/layout/index.vue'
import VabProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {
store } from '@/store'
let routerLoad = false
VabProgress.configure({
easing: 'ease',
speed: 500,
trickleSpeed: 200,
showSpinner: false
})
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: Layout,
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: () => import('@/views/index/index.vue'),
meta: {
noKeepAlive: true
}
},
{
path: '/login'