vue3配置permission.js和router、pinia实现路由拦截的简单步骤

pnpm install pinia

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

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.js 使用
export default pinia

// 模块统一导出
export * from './modules/member'

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
    }
    //退出登录时
    const removeUserInfo = () => {
      userInfo.value = {}
    }

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

// 注册持久化插件
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()
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

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

const whiteList = ['/login'] // 不需要鉴权的路由白名单

router.beforeEach(async (to, from, next) => { 
  //useUserStore需要根据你实际定义的Pinia来
  const userStore = useUserStore()
  // 如果用户已经登录，则直接放行
  if (userStore.userInfo.token) {
    next()
    return
  }

  // 如果用户未登录并且目标路由不在白名单中
  if (!userStore.userInfo.toke && !whiteList.includes(to.path)) {
    // 重定向到登录页
    next(`/login?redirect=${to.path}`)
  } else {
    // 目标路由在白名单中，直接放行
    next()
  }
})

export default router

import '@/router/permission.js'