這樣在管理后臺里實作 403 頁面實在是太優雅了-有解無憂

前言

403 頁面通常表示無權限訪問，與 404 頁面代表著不同含義，而大部分管理后臺框架僅提供了 404 頁面的支持，但卻忽略了對 403 頁面的處理，有的框架雖然也有對 403 頁面的處理，但處理效果卻不盡人意，

那怎么樣的 403 頁面才是即好用，又優雅呢？

其他框架是怎么做的

1、完全不處理

不處理的結果就是無訪問權限的頁面大概率會進入 404 頁面的邏輯，

因為這類框架通常在路由注冊前就把無訪問權限的路由直接剔除了，所以當用戶訪問了一個無訪問權限的路由，對系統來說，它就是一個不存在的路由，從而進入到 404 頁面，

那弊端是什么呢？那就是用戶沒辦法區分他想訪問的這個頁面，到底是因為權限不夠，還是地址錯誤，會給用戶造成一定的使用困惑，

2、稍稍處理

稍稍處理的方式和第一種思路不太一樣，這類框架在路由注冊前并不會對路由資料做處理，而是在路由導航守衛里去判斷是否有權限訪問路由，如果沒有權限則進入到預先注冊好的 403 頁面地址，

這種方案的優勢在于它區分了 404 和 403 頁面，因為即便是無訪問權限的路由，也是真實注冊到了路由實體上，只是在訪問時做了鑒權和重定向，

那弊端又是什么呢？那就是用戶雖然知道了當前頁面無訪問權限，但卻看不到頁面的真實地址，因為已經被重定向到 403 頁面上了，用戶體驗稍微欠缺了一點，就像下圖這樣：

我是怎么做的

先稍微思考一下方案，首先剛才第一種方案剔除無訪問權限的路由肯定不行，無訪問權限的路由必須得注冊，這樣才能和 404 頁面做出區分；其次第二種方案在導航守衛里做重定向也不行，不能重定向，要保證路由地址還是原來的地址，但頁面要展示 403 頁面的內容，

于是，方案就出來了，那就是 在路由注冊前，將無訪問權限的路由的 component 直接替換成 403 頁面組件 不就可以了么，這么一來，路由還是那個路由，只是對應的頁面組件不一樣了，既區分了 404 和 403 頁面，還保留 403 頁面的原始路由地址，

用代碼來描述大致就是：

// 原始路由資料
[
  {
    path: '/permission',
    component: () => import('@/layouts/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/list1.vue'),
        meta: {
          auth: 'admin' // 鑒權欄位，如果為 admin 時則可以訪問
        }
      }
    ]
  }
]

// 假設用戶權限為 test ，處理過后的路由資料
[
  {
    path: '/permission',
    component: () => import('@/layouts/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/403.vue'), // 注意看這里，替換成了 403 頁面組件
        meta: {
          auth: 'admin'
        }
      }
    ]
  }
]

實際效果就是這樣：

Kapture 2023-02-26 at 00.13.57.gif

可以看到，當賬號從 admin 切換到 test 后，由于 test 賬號不具備訪問權限，所以頁面顯示為 403 頁面，與此同時，頁面的 URL 地址依舊還是原始的地址，達到了預期的效果，

這就夠了么？

當然沒有，因為 404 頁面是通過以下方式做的兜底處理：

{
  path: '/:all(.*)*',
  component: () => import('@/views/404.vue')
}

由于它并不是一個多級路由的結構，這就導致 404 頁面和 403 頁面的展示有一點差別，404 頁面是整頁顯示，403 頁面是區域顯示：

而我希望是能和 404 頁面保持一致，也就是讓 403 頁面也進行整屏顯示，

處理起來也不復雜，無非是在路由注冊前，將無訪問權限的多級路由轉成一級路由就可以啦，當然處理程序會使用到遞回，以及需要將多級路由的 path 進行合并，從代碼來描述大致就是這樣：

// 原始路由資料
[
  {
    path: '/permission',
    component: () => import('@/layouts/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/list1.vue'),
        meta: {
          auth: 'admin' // 鑒權欄位，如果為 admin 時則可以訪問
        }
      }
    ]
  }
]

// 假設用戶權限為 test ，處理過后的路由資料
[
  {
    path: '/permission/index', // 注冊看這里，將多級路由的 path 合并成一級
    component: () => import('@/layouts/403.vue'),
    meta: {
      auth: 'admin'
    }
  }
]

最終效果如下：