路由拦截器，pinia修改

package.json

@@ -16,6 +16,7 @@
     "element-plus": "^2.7.5",
     "mitt": "^3.0.1",
     "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^4.1.2",
     "querystring": "^0.2.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.3"

src/api/myAxios.ts

@@ -1,5 +1,7 @@
 // 创建实例时配置默认值
 import axios from "axios";
+import router from '../router'
+
 const myAxios = axios.create({
     withCredentials:true,
     baseURL: 'http://localhost:8888/api'//测试服务器
@@ -17,6 +19,10 @@ axios.interceptors.request.use(function (config) {
 axios.interceptors.response.use(function (response) {
     // 2xx 范围内的状态码都会触发该函数。
     // 对响应数据做点什么
+    // 未登录跳转登录页面
+    if (response.data.code === 40100) {
+        router.replace('/')
+    }
     return response.data;
 }, function (error) {
     // 超出 2xx 范围的状态码都会触发该函数。

src/layout/components/Header.vue

@@ -102,12 +102,12 @@
 
     <div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: offset + 'px' }">
       <el-avatar style="margin-right: 10px">
-        <img :src="store.loginUser.userAvatar" alt="">
+        <img :src="userInfo.userAvatar" alt="">
       </el-avatar>
 
       <el-dropdown style="cursor: pointer;" size="default">
         <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
-          <span>{{ store.loginUser.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
+          <span>{{ userInfo.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
@@ -121,7 +121,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import emitter from '@/utils/emitter'
 import { useRoute, useRouter } from "vue-router";
 import myAxios from '@/api/myAxios';
@@ -133,7 +133,7 @@ const route = useRoute();
 const offset = ref(20)
 const showLog = ref(false)
 const store = userStore()
-
+const userInfo = store.loginUser
 
 const logout = async () => {
   const res: any = await myAxios.post("/user/logout", {})

src/main.ts

@@ -19,5 +19,3 @@ app.use(router)
 //使用pinia
 app.use(pinia)
 app.mount('#app')
-
-

src/router/index.ts

@@ -1,11 +1,28 @@
 import {createRouter, createWebHashHistory} from "vue-router";
 import {routes} from "./routes";
-
+import { userStore } from "@/store/userStore";
 // 创建路由实例并传递 `routes` 配置
 const router = createRouter({
     // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
     history: createWebHashHistory(),
     routes, // `routes: routes` 的缩写
 })
-
+//路由的请求拦截器
+router.beforeEach((to, from, next) => {
+    const store = userStore()
+    console.log(to.name,123213123)
+    if (to.name == 'login') {
+        store.$reset()
+        next()
+        return
+    }
+    if (store.loginUser.userRole == "notLogin") {
+        router.back()
+        return
+    }
+    if (store.loginUser.userRole != "notLogin") {
+        next()
+        return
+    }
+})
 export default router

src/router/routes.ts

@@ -1,5 +1,3 @@
-
-
 export const routes = [
     {
         path: '/',

src/store/index.js

@@ -1,6 +1,11 @@
 //导入Pinia
 import { createPinia } from "pinia";
+//导入持久化工具
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
 //创建Pinia示例
 const pinia = createPinia();
+//持久化插件
+pinia.use(piniaPluginPersistedstate)
 //导出Pinia
 export default pinia

src/store/userStore.ts

@@ -13,20 +13,20 @@ export const userStore = defineStore( 'user' , {
                 userRole: 'notLogin'
             }
         }
-    },
+    }, persist: true,
     //actions是用于定义和处理状态更改的方法。它们可以包含任意的逻辑，如异步请求、数据处理和状态更新。
     actions: {
         //获取登录用户信息
         async getLoginUser(res:any) {
             //请求登录信息
             // const res = await myAxios.get('/user/get')
-            console.log(res,121212312312)
             this.updateUser( res )
         },
         //更新用户信息
         //更新state
         updateUser(payLoad : any) {
             this.loginUser = payLoad
+            console.log(payLoad,2654615165)
         }
     }
 })

src/views/User/UserManagement.vue

@@ -73,6 +73,7 @@ import { ElMessage } from 'element-plus';
 import myAxios from '@/api/myAxios';
 import {ref, onMounted} from 'vue'
 import { da } from 'element-plus/es/locales.mjs';
+
 //获取的所有数据
 const tableData = ref([])
 //筛选条数
@@ -127,7 +128,6 @@ const handleCurrentChange = (Current:any) => {
 
 //搜索按钮方法
 const onSearch = (data : String)=>{
-  console.log(data)
   searchParams.value.userName = data
   searchParams.value.current = 1
   getUserList()