快捷導(dǎo)航

vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡(jiǎn)單步驟

更新時(shí)間：2024年11月19日 11:09:36 作者：劍亦未配妥

這篇文章主要介紹了如何在場(chǎng)景網(wǎng)站中實(shí)現(xiàn)對(duì)未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個(gè)user.js文件來存儲(chǔ)用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對(duì)未登錄用戶的攔截,需要的朋友可以參考下

場(chǎng)景

網(wǎng)站中，通常用戶登錄后后端返回token給前端，前端存儲(chǔ)在本地并且在每次發(fā)送請(qǐng)求時(shí)攜帶，如果用戶未登錄（沒有token）就想訪問網(wǎng)站內(nèi)部的網(wǎng)頁，我們就需要做對(duì)應(yīng)攔截。

配置Pinia

首先命令行下載pinia

pnpm install pinia

src中新建一個(gè)stores目錄，其中根據(jù)自己的需要進(jìn)行編寫，推薦如下的目錄結(jié)構(gòu)

在這里插入圖片描述

其中user.js就是存放自己需要存儲(chǔ)化的數(shù)據(jù)（名字可以自定義），而index.js是為了統(tǒng)一導(dǎo)出pinia

//index.js
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 創(chuàng)建 pinia 實(shí)例
const pinia = createPinia()
// 使用持久化存儲(chǔ)插件
pinia.use(persist)

// 默認(rèn)導(dǎo)出，給 main.js 使用
export default pinia

// 模塊統(tǒng)一導(dǎo)出
export * from './modules/member'

user.js中（示例）

import { defineStore } from 'pinia'
import { ref } from 'vue'

//用戶模塊 token setToken removeToken
export const useUserStore = defineStore(
  'useMemberStore',
  () => {
    //用戶信息
    const userInfo = ref({})

    const setUserInfo = (data) => {
      userInfo.value = data
    }
    //退出登錄時(shí)
    const removeUserInfo = () => {
      userInfo.value = {}
    }

    return {
      userInfo,
      setUserInfo,
      removeUserInfo
    }
  },
  {
    persist: true
  }
)

main.js文件中同樣需要進(jìn)行配置

// 注冊(cè)持久化插件
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()
// 注冊(cè)持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

配置permission.js

router的配置就不再過多介紹了，很簡(jiǎn)單，在router文件夾中新建一個(gè)permission.js文件，其中如下內(nèi)容

import router from './index' // 引入主路由模塊
import { useUserStore } from '@/stores/modules/user'//pinia持久化的信息

const whiteList = ['/login'] // 不需要鑒權(quán)的路由白名單

router.beforeEach(async (to, from, next) => { 
  //useUserStore需要根據(jù)你實(shí)際定義的Pinia來
  const userStore = useUserStore()
  // 如果用戶已經(jīng)登錄，則直接放行
  if (userStore.userInfo.token) {
    next()
    return
  }

  // 如果用戶未登錄并且目標(biāo)路由不在白名單中
  if (!userStore.userInfo.toke && !whiteList.includes(to.path)) {
    // 重定向到登錄頁
    next(`/login?redirect=${to.path}`)
  } else {
    // 目標(biāo)路由在白名單中，直接放行
    next()
  }
})

export default router

main.js中記得引入

import '@/router/permission.js'

現(xiàn)在就可以實(shí)現(xiàn)對(duì)未登錄（沒有token）的用戶訪問進(jìn)行攔截了

總結(jié)

到此這篇關(guān)于vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的文章就介紹到這了,更多相關(guān)vue3實(shí)現(xiàn)路由攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: