【Abp VNext】实战入门（五）：【2】前端管理界面 vue-element-admin —— 路由拦截优化改造

一、前言

项目根目录中的 permission.js 存放的是路由拦截代码，同时在 main.js 中全局引入 import ‘@/permission’ ；每次页面跳转前都能有效拦截，根据自己的业务有所作为；

不得不说这个 permission.js 取名不是很贴切 路由拦截就路由拦截，取名为permission 授权许可，可能就是为了体现角色权限动态页面路由加载吧；

在每次路由的时候检测路由白名单、Token是否存在就可以了，没必要再去检测用户基础信息 多余操作，当然根据实际需求而定；

关键是这块的代码写的很烂，if else 各种嵌套；

二、改造优化

1、Permission.js 更名为 Guard.js

2、从项目根目录 移动到：/router 文件夹随路由走

3、main.js 添加全局引用： import ‘@/router/Guard’

4、Guard.js 代码优化调整：

import router from './index'
import NProgress from 'nprogress' // 顶部加载条 用于页面切换
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

// 1、顶部加载条配置
NProgress.configure({ showSpinner: false })

// 2、白名单设置：无需登录验证
const whiteList = ['/login']

// 3、路由拦截
router.beforeEach(async(to, from, next) => {
  // 3.1、开启顶部加载条
  NProgress.start()

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

  // 3.3、白名单检测：白名单页面直接跳转
  if (whiteList.indexOf(to.path) !== -1) { // path是基础路径  fullpath带参数
    next()// 直接跳转
    NProgress.done()
    return
  }

  // 3.4、检测当前是否登录：未登录直接跳转登录界面
  const tmpHasToken = getToken()
  if (!tmpHasToken) {
    next(`/login?redirect=${to.path}`) // 跳转登录界面
    NProgress.done()
    return
  }

  // 3.5、不在白名单 但是已经登录：跳转指定页面
  next()
})

// 4、每次路由结束 调用一次结束顶部状态进度Process bar
router.afterEach(() => {
  NProgress.done()
})

           

5、白名单配置模式更改：针对页面比较多比较复杂的情况好用

在router/index.js 中 对页面路径配置进行改造：增加是否需要登录配置

{
    path: '/test',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'test',
        component: () => import('@/views/test/index'),
        meta: { title: '测试页面', icon: 'form' },
        isneedlogin:true  //增加是否需要登录配置
      }
    ]
  },
           

然后在router/guard.js 修改代码：

//if (whiteList.indexOf(to.path) !== -1) { 屏蔽掉原来的判断
  if(!to.isneedlogin){ //采用新的判断
    next()// 直接跳转
    NProgress.done()
    return
  }
           

三、总结

有一个完全可控简洁优雅的路由拦截 感觉很舒服；