fix: 修复用户未登录相关的导航栏显示问题

1、修复用户未登录不显示导航栏
2、修复用户未登录也会发送请求
3、用户未登录时只显示部分导航栏

src/App.vue

@@ -4,10 +4,14 @@ import { useTabbar } from "./stores/useTabbar";
 import BussApi from "./api/BussApi";
 import { useUser } from "./stores/useUser";
 import { useToast } from "wot-design-uni";
+import { useRoute } from "uni-mini-router";
+import { useRouter } from "uni-mini-router";
 
 const tab = useTabbar()
 const user = useUser()
 const toast = useToast()
+const route = useRoute()
+const router = useRouter()
 
 onLaunch(() => {
   console.debug("App Launch");
@@ -15,12 +19,21 @@ onLaunch(() => {
   // reset tabbar
   tab.activeTab = 'home'
 
-  // refersh user info
-  BussApi.profile(user.token!).then(res => {
-    user.userinfo = res
-  }).catch(err => {
-    toast.error({ msg: err.message })
-  })
+  // refresh user info if token exists
+  if (user.hasValidToken()) {
+    toast.loading({ msg: '加载用户信息...' })
+    BussApi.profile(user.token!).then(res => {
+      user.userinfo = res
+      toast.close()
+    }).catch(err => {
+      user.setToken(null)  // clear invalid token
+      toast.error({ msg: '登录已过期，请重新登录' })
+      // 如果在需要权限的页面，跳转到首页
+      if (!['home', 'my'].includes(route.name!)) {
+        router.pushTab({ name: 'home' })
+      }
+    })
+  }
 });
 
 onShow(() => {

src/api/BussApi.ts

@@ -27,16 +27,27 @@ export default class BussApi {
    * 获取当前用户信息
    * @param token - 用户认证token
    * @returns Promise<User> 返回用户信息
+   * @throws Error 当 token 无效时抛出错误
    */
   static profile(token: string): Promise<User> {
+    if (!token || token.trim().length === 0) {
+      return Promise.reject(new Error('Token is required'));
+    }
+
     return http
       .server()
       .get("users/current", {
         headers: {
-          Authorization: `Bearer ${token}`,
+          Authorization: `Bearer ${token.trim()}`,
         },
       })
-      .then((res) => res.data.data);
+      .then((res) => res.data.data)
+      .catch((error) => {
+        if (error.response?.status === 401) {
+          throw new Error('Token is invalid or expired');
+        }
+        throw error;
+      });
   }
 
   /**

src/components/TabBar.vue

@@ -47,21 +47,31 @@ const nameLabelIconMap = {
 }
 
 const tabList = computed(() => {
-  // 过滤出当前用户有权限看到的导航项
+  // 如果用户未登录，只显示首页和我的
+  if (!user.userinfo) {
+    return router.routes
+      .filter((r: { name: string }) => ['home', 'my'].includes(r.name))
+      .map((route: { name: keyof typeof nameLabelIconMap }) => ({
+        name: route.name,
+        title: nameLabelIconMap[route.name]?.title,
+        icon: nameLabelIconMap[route.name]?.icon
+      }));
+  }
+
+  // 已登录用户根据权限显示导航项
   return router.routes
     .filter((r: { name: string }) => {
       const config = nameLabelIconMap[r.name as keyof typeof nameLabelIconMap]
       // 检查该路由是否在配置中，且用户是否有权限访问
       return config && config.roles.some(role => user.hasRole(role as "teacher" | "admin" | "liaison" | "sysadmin"))
     })
-    .map((route: { name: keyof typeof nameLabelIconMap }) => {
-      return {
-        name: route.name,
-        title: nameLabelIconMap[route.name]?.title,
-        icon: nameLabelIconMap[route.name]?.icon
-      }
-    })
+    .map((route: { name: keyof typeof nameLabelIconMap }) => ({
+      name: route.name,
+      title: nameLabelIconMap[route.name]?.title,
+      icon: nameLabelIconMap[route.name]?.icon
+    }));
 })
+
 </script>
 
 <template>

src/composables/useConfig.ts

@@ -2,7 +2,8 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useConfig = defineStore('config', () => {
-  const BASE_URL = ref<string>("http://service5.fenshenzhike.com:1218/api/users/login");
+  const BASE_URL = ref<string>("http://service5.fenshenzhike.com:1218/api/");
+  // const BASE_URL = ref<string>("http://localhost:1218/api/");
   return {
     BASE_URL
   }

src/pages/index/index.vue

@@ -75,13 +75,12 @@ const openLessonDetail = (courseId: number) => {
 
 
 const loadLessons = async () => {
-  if (!user.userinfo) {
+  if (!user.hasValidToken() || !user.userinfo) {
     toast.error({ msg: '请先登录' })
+    router.replace('/pages/login/index')
     return
   }
-
   toast.loading({ msg: '加载中...' })
-
   try {
     let res;
 

src/pages/login/index.vue

@@ -36,11 +36,11 @@ const handleSubmit = () => {
           password: model.password,
           remember: model.remember
         }).then(res => {
-          user.token = res.token
+          user.setToken(res.token)
           toast.loading({
             msg: '加载资料...'
           })
-          BussApi.profile(user.token).then(res => {
+          BussApi.profile(res.token).then(res => {
             user.userinfo = res
             toast.success({ msg: '登录成功' })
             setTimeout(() => {

src/pages/my/index.vue

@@ -14,13 +14,19 @@ const toast = useToast()
 const user = useUser()
 const userInfo = ref<User | null>(null)
 
-const loadUserInfo = async () => {
+async function loadUserInfo() {
   try {
+    if (!user.hasValidToken() || !user.userinfo) {
+      toast.error({ msg: '请先登录' })
+      router.replace('/pages/login/index')
+      return
+    }
     toast.loading({
       msg: '加载中...'
     })
     const res = await BussApi.profile(user.token!)
     toast.close()
+    console.log(res)
     user.userinfo = res
     userInfo.value = res
   } catch (error: any) {

src/pages/progress/index.vue

@@ -10,7 +10,9 @@ import { useRoute } from 'uni-mini-router';
 import { useUser } from '@/stores/useUser';
 import { useTabbar } from '@/stores/useTabbar'
 import { onPullDownRefresh } from '@dcloudio/uni-app'
+import { useRouter } from 'uni-mini-router';
 
+const router = useRouter()
 const route = useRoute()
 const message = useMessage()
 const message_reject = useMessage('wd-message-box-slot')
@@ -304,8 +306,9 @@ const onStep4 = (rejected: boolean = false) => {
 
 const updateLessons = async () => {
   adviseTextValue.value = ""
-  if (!user.userinfo) {
+  if (!user.hasValidToken() || !user.userinfo) {
     toast.error({ msg: '请先登录' })
+    router.replace('/pages/login/index')
     return
   }
 

src/stores/useUser.ts

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useUser = defineStore("user", () => {
-  const token = ref<string | null>(null);
+  const token = ref<string | null>(uni.getStorageSync('token') || null);
   const userinfo = ref<User | null>(null);
 
   /**
@@ -74,6 +74,21 @@ export const useUser = defineStore("user", () => {
     return false;
   }
 
+  // 设置 token 并持久化
+  function setToken(newToken: string | null) {
+    token.value = newToken;
+    if (newToken) {
+      uni.setStorageSync('token', newToken);
+    } else {
+      uni.removeStorageSync('token');
+    }
+  }
+
+  // 检查 token 是否有效
+  function hasValidToken(): boolean {
+    return !!token.value && token.value.length > 0;
+  }
+
   function logout() {
     token.value = null;
     userinfo.value = null;
@@ -87,5 +102,7 @@ export const useUser = defineStore("user", () => {
     canViewAllCourses,
     canEditCourse,
     logout,
+    setToken,
+    hasValidToken
   };
 });