vue3配置permission.js和router、pinia实现路由拦截的简单步骤
作者：剑亦未配妥
这篇文章主要介绍了如何在场景网站中实现对未登录用户访问的拦截,通过配置Pinia,创建一个user.js文件来存储用户数据,并在main.js中进行配置,同时通过在router目录下创建permission.js文件,可以实现对未登录用户的拦截,需要的朋友可以参考下
场景
网站中，通常用户登录后后端返回token给前端，前端存储在本地并且在每次发送请求时携带，如果用户未登录（没有token）就想访问网站内部的网页，我们就需要做对应拦截。
配置Pinia
首先命令行下载pinia
pnpm install pinia
src中新建一个stores目录，其中根据自己的需要进行编写，推荐如下的目录结构
其中user.js就是存放自己需要存储化的数据（名字可以自定义），而index.js是为了统一导出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'
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
}
//退出登录时
const removeUserInfo = () => {
userInfo.value = {}
}
return {
userInfo,
setUserInfo,
removeUserInfo
}
},
{
persist: true
}
)main.js文件中同样需要进行配置
// 注册持久化插件
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)
配置permission.js
router的配置就不再过多介绍了，很简单，在router文件夹中新建一个permission.js文件，其中如下内容
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
main.js中记得引入
import '@/router/permission.js'
现在就可以实现对未登录（没有token）的用户访问进行拦截了
总结
到此这篇关于vue3配置permission.js和router、pinia实现路由拦截的文章就介绍到这了,更多相关vue3实现路由拦截内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！