vue3系統(tǒng)進入頁面前的權限判斷和重定向方式

更新時間：2024年03月12日 10:56:03 作者：鶴渺

這篇文章主要介紹了vue3系統(tǒng)進入頁面前的權限判斷和重定向方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

應用場景

經(jīng)常有系統(tǒng)的權限判定，比如某個頁面只能角色a進入，或者一個系統(tǒng)多個頁面都有權限設置，根據(jù)用戶的權限判斷是否能進入頁面，這類權限控制應該是比較基礎和常見的吧。

這次就記錄一下我之前做的權限控制流程。

開發(fā)流程

主要通過進入頁面前的判斷:router.beforeEach()

這里實現(xiàn)的控制，例如：

進入頁面時判斷是否登錄，如果未登錄就跳到login頁面，如果登錄了就進入到項目列表頁；
進入項目詳情頁，需要判斷用戶是否有權限；
諸如以上。

詳細開發(fā)流程

我在根目錄文件下，新增一個permission.js頁面，并在main.js中引入，借助router的路由攔截功能，實現(xiàn)權限判斷。

1.引入權限控制文件

項目結構如下：

在main.js引入

2.權限控制詳細

下面是permission里的權限控制的主要操作。

import router, { asyncRoutes } from '@/router'
import { getToken, setToken, removeToken } from '@/utils/auth'
import getPageTitle from '@/utils/getPageTitle'
//白名單
const whiteList = ['/login', '/404', '/401', '/500'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
  // set page title
  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()
  let path = to.path
  // 白名單中路由直接放行
  if (whiteList.includes(path)) {
    next()
    return
  }
//如果已登錄，有token，則跳到重定向頁面
  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
    } 
    //在這里可以進行其他判斷，如果已經(jīng)登錄，并且不是在登錄頁面，即在頁面C，那么可以獲取用戶的角色權限 ，對用戶是否能進入頁面C進行判斷
    else {
      next()
    }
   
  } else {
    //whiteList 里的內容不需要驗簽
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      //無登錄token，重定向，登錄后跳轉
      if (to.query.token) {
        next(`/login?redirect=${to.path}?token=${to.query.token}`)
      } else {
         next(`/login`)
      }
      
    }
  }
})
 
router.afterEach(async (to, from, next) => {
  if (to.path === '/login') {
 
  } else {
    //調接口，記錄日志
   //……
  }
})