快捷導(dǎo)航

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

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

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

應(yīng)用場景

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

這次就記錄一下我之前做的權(quán)限控制流程。

開發(fā)流程

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

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

進(jìn)入頁面時(shí)判斷是否登錄，如果未登錄就跳到login頁面，如果登錄了就進(jìn)入到項(xiàng)目列表頁；
進(jìn)入項(xiàng)目詳情頁，需要判斷用戶是否有權(quán)限；
諸如以上。

詳細(xì)開發(fā)流程

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

1.引入權(quán)限控制文件

項(xiàng)目結(jié)構(gòu)如下：

在main.js引入

2.權(quán)限控制詳細(xì)

下面是permission里的權(quán)限控制的主要操作。

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ìn)行其他判斷，如果已經(jīng)登錄，并且不是在登錄頁面，即在頁面C，那么可以獲取用戶的角色權(quán)限 ，對用戶是否能進(jìn)入頁面C進(jìn)行判斷
    else {
      next()
    }
   
  } else {
    //whiteList 里的內(nèi)容不需要驗(yàn)簽
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      //無登錄token，重定向，登錄后跳轉(zhuǎn)
      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 {
    //調(diào)接口，記錄日志
   //……
  }
})