feat: 登录交互完善

src/hooks/usePageAuth.ts

@@ -6,7 +6,7 @@ const loginRoute = import.meta.env.VITE_LOGIN_URL
 const isDev = import.meta.env.DEV
 function isLogined() {
   const userStore = useUserStore()
-  return !!userStore.userInfo.username
+  return !!userStore.token
 }
 // 检查当前页面是否需要登录
 export function usePageAuth() {

src/interceptors/route.ts

@@ -12,6 +12,7 @@ const loginRoute = import.meta.env.VITE_LOGIN_URL
 
 function isLogined() {
   const userStore = useUserStore()
+  console.log(userStore)
   return !!userStore.token
 }
 

src/pages/mine/mine.vue

@@ -8,43 +8,38 @@
   </route>
 
 <script lang="ts" setup>
+import { useUserStore } from '@/store/user'
+import { toPage } from '@/utils/page'
+
 defineOptions({
   name: 'Mine', // 我的
 })
+
 // 获取屏幕边界到安全区域距离
 const systemInfo = uni.getSystemInfoSync()
 const safeAreaInsets = systemInfo.safeAreaInsets
 
-const dayType = ref(1)
+// 用户状态管理
+const userStore = useUserStore()
 
-function toPage(url: string) {
-  uni.navigateTo({
-    url,
-  })
-}
+// 判断是否已登录
+const isLoggedIn = computed(() => {
+  return !!userStore.token
+})
 
-// 搜索结果
-const dataList = ref([])
-function queryList(pageNo, pageSize) {
-  // 此处请求仅为演示，请替换为自己项目中的请求
-  setTimeout(() => {
-    dataList.value = [
-      { title: '123' },
-      { title: '123' },
-      { title: '123' },
-      { title: '12345' },
-    ]
-  }, 1000)
-}
+// 获取用户信息
+const userInfo = computed(() => {
+  return userStore.userInfo
+})
 
 // 简单的模拟数据
 const menuList = ref([
   { name: 'My Profile', url: '/pages/mine/myProfile' },
   { name: 'Address Book', url: '/pages/mine/addressBook' },
-  { name: 'Share' },
-  { name: 'My Favorite' },
-  { name: 'Live Chat' },
-  { name: 'Activity Group' },
+  { name: 'Share', url: '' },
+  { name: 'My Favorite', url: '' },
+  { name: 'Live Chat', url: '' },
+  { name: 'Activity Group', url: '' },
 ])
 </script>
 
@@ -54,17 +49,22 @@ const menuList = ref([
     :style="{ paddingTop: `${safeAreaInsets?.top + 3}px` }"
   >
     <view class="flex items-center">
-      <wd-img width="96rpx" height="96rpx" round src="/static/images/avatar.jpg" />
+      <wd-img
+        width="96rpx"
+        height="96rpx"
+        round
+        :src="isLoggedIn && userInfo?.avatar ? userInfo.avatar : '/static/images/default-avatar.png'"
+      />
       <!-- 已登录 -->
-      <!-- <view class="ml-24rpx text-32rpx font-bold">
-        Aamir Khan
-      </view> -->
+      <view v-if="isLoggedIn" class="ml-24rpx text-32rpx font-bold">
+        {{ userInfo?.name || userInfo?.username || 'User' }}
+      </view>
       <!-- 未登录 -->
-      <view class="ml-24rpx">
+      <view v-else class="ml-24rpx flex items-center">
         <wd-button size="small" custom-class="mr-20rpx! bg-transparent!" plain @click="toPage('/pages/register/register')">
           Register
         </wd-button>
-        <wd-button size="small">
+        <wd-button size="small" @click="toPage('/pages/login/login')">
           Login
         </wd-button>
       </view>

src/store/user.ts

@@ -6,8 +6,6 @@ import { toast } from '@/utils/toast'
 
 // 初始化状态
 const userInfoState: any = {
-  id: 0,
-  name: '',
   avatar: '/static/images/default-avatar.png',
 }
 
@@ -72,7 +70,7 @@ export const useUserStore = defineStore(
         setTimeout(() => {
           if (redirectUrl) {
             // 使用 toPage 方法，自动判断是否为 tabBar 页面
-            toPage(redirectUrl)
+            toPage(redirectUrl, {}, true)
           }
           else {
             // 默认跳转到首页
@@ -98,4 +96,7 @@ export const useUserStore = defineStore(
       login,
     }
   },
+  {
+    persist: true,
+  },
 )

src/utils/page.ts

@@ -5,7 +5,7 @@ export function goBack(delta = 1) {
 
 // uniapp 跳转页面 可携带参数
 // 示例： toPage('/pages/productDetail/productDetail', { id: 123 })
-export function toPage(url: string, params?: Record<string, any>) {
+export function toPage(url: string, params?: Record<string, any>, isRedirect = false) {
   let targetUrl = url
   const tabBarPages = ['/pages/index/index', '/pages/income/income', '/pages/mine/mine']
 
@@ -19,9 +19,16 @@ export function toPage(url: string, params?: Record<string, any>) {
     })
   }
   else {
-    uni.navigateTo({
-      url: targetUrl,
-    })
+    if (isRedirect) {
+      uni.redirectTo({
+        url: targetUrl,
+      })
+    }
+    else {
+      uni.navigateTo({
+        url: targetUrl,
+      })
+    }
   }
 }