vue3 + vite 项目搭建 - 引入vue-router及实现权限控制

一般后台管理系统都会有管理员和普通用户的区分，所以要做权限控制

思路

1. 创建公用页面login，可以让用户进行登录操作，根据用户信息对应的身份，匹配不同的权限模块
2. 在路由前置钩子进行身份验证拦截，将拦截条件分为 白名单（不做拦截）、登录态未登录、登录态已登陆
3. 路由注册分为两步，公用页面直接注册，权限路由根据登录用户的身份来注册
4. 解决路由层级过深会导致keep-alive不缓存问题

实现

1. 安装依赖

"dependencies": {
   
	"nprogress": "^0.2.0",
    "vue-router": "^4.0.6"
  }

2. 在src目录下创建配置文件config，统一管理一些设置信息 新建setting.config.js

/** src/config/setting.config.js */
// 项目名称
export const title: string = '风控管理平台'
// 标题分隔符
export const titleSeparator: string = ' - '
// 标题是否反转
// 如果为false: "page - title"
// 如果为ture : "title - page"
export const titleReverse: boolean = true
// 缓存路由的最大数量
export const keepAliveMaxNum: number = 20
// 路由模式，可选值为 history 或 hash
export const routerMode: 'hash' | 'history' = 'hash'
// 不经过token校验的路由
export const routesWhiteList: string[] = [
  '/login',
  '/login/vip',
  '/404',
  '/403'
]
// 是否开启登录拦截
export const loginInterception: boolean = true

3. 在src目录下创建router文件夹，新建index.ts router.ts

// src/router/index.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'