【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
  }
           

三、總結

有一個完全可控簡潔優雅的路由攔截 感覺很舒服；