Update token handling and user state management

components/kl-login/index.vue

@@ -90,7 +90,10 @@
   import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
   import useUserStore from '~/store/user'
   const app = useNuxtApp()
+  const token = useToken();
+
   const userStore = useUserStore()
+  const tokenCookie = useCookie<string | undefined>('token');
 
   const props = defineProps({
     visible: {
@@ -210,6 +213,10 @@
         const res = await login(loginForm)
         const { code, data, msg } = res
         if (code !== 0) return ElMessage.error(msg)
+        // 设置cookie
+        tokenCookie.value = data.accessToken;
+        // 更新state
+        token.value = data.accessToken;
         REFRESHTOKEN.setToken(data.accessToken, data.refreshToken)
         REFRESHTOKEN.setUserId(data.userId.toString())
         REFRESHTOKEN.setUserName(loginForm.mobile)

composables/states.ts

@@ -2,7 +2,26 @@
 export const useToken = () =>
   useState<string>('token', () => {
     const token = useCookie<string | undefined>('token');
-    return token.value ? 'Bearer ' + token.value : '';
+    return token.value ? token.value : '';
+  });
+
+  type UserInfo = {
+    nickname: string,
+    avatar: string,
+    mobile: string,
+    id: number | undefined,
+    vipLevel: number | undefined,
+    sex: number | undefined,
+  }
+  export const useUserInfo = () => useState<UserInfo>('userInfo', () => {
+    return {
+      nickname: '',
+      avatar: '',
+      mobile: '',
+      id: undefined,
+      vipLevel: undefined,
+      sex: undefined,
+    }
   });
 
 /** 热门数据 */

composables/useFetchRequest.ts

@@ -6,7 +6,8 @@ const useServerRequest = async <T>(
   url: string,
   opts?: UseFetchOptions<T, unknown>
 ) => {
-  const token = useCookie<string | undefined>("token");
+  const token = useToken();
+  const user = useUserInfo();
   const runtimeConfig = useRuntimeConfig();
 
   const defaultOptions: UseFetchOptions<unknown> = {
@@ -14,9 +15,15 @@ const useServerRequest = async <T>(
     onRequest({ options }) {
       options.headers = options.headers || "application/json";
       if (token.value) {
+        console.log('user----', user.value);
+        
+        console.log('token----', "Bearer " + token.value)
         // @ts-ignore
         options.headers["authorization"] = "Bearer " + token.value;
       }
+
+      console.log(url +'-----' +'options----', options);
+      
     },
     onResponse({ response }) {
       if (+response.status === 200 && +response._data.code !== 0) {

pages/sign-content/index.vue

@@ -72,11 +72,12 @@
   import useUserStore from '~/store/user'
   import dayjs from 'dayjs'
   const userStore = useUserStore()
+  const user = useUserInfo();
 
   const query = reactive({
     pageNo: 1,
     pageSize: 10,
-    userId: userStore.userId,
+    userId: user.value.id,
     title: '',
   })
 
@@ -118,6 +119,8 @@
   const {data: result, refresh: getUserPointPageList } = await useAsyncData('getUserPointPage', async () => {
     const res = await getUserPointPage(query)
     return res.data
+  }, {
+    immediate: true, // 立即请求
   })
 
   // const getUserPointPageList = async () => {

store/user.ts

@@ -38,10 +38,12 @@ export default defineStore("useUserStore", {
       }
     },
     async getUserInfo() {
+      const user = useUserInfo();
       const res = await getUserInfo();
       if (res.code === 0) {
         this.userInfoRes = res.data;
         refreshToken.setUserInfo(res.data);
+        user.value = res.data;
         // 建立连接mqtt
         this.connectMqtt();
       }