Selaa lähdekoodia

feat(登录): 实现H5模拟登录功能并优化路由拦截

- 在user store中添加setUserInfo方法
- 新增tabbar页面判断工具函数isPageTabbar
- 重构路由拦截逻辑,简化登录判断
- 实现H5模拟登录页面及跳转逻辑
- 移除不再使用的usePageAuth钩子
feige996 8 kuukautta sitten
vanhempi
commit
e8478c9d43
5 muutettua tiedostoa jossa 45 lisäystä ja 56 poistoa
  1. 0 50
      src/hooks/usePageAuth.ts
  2. 32 1
      src/pages/login/login.h5.vue
  3. 8 5
      src/router/interceptor.ts
  4. 1 0
      src/store/user.ts
  5. 4 0
      src/tabbar/store.ts

+ 0 - 50
src/hooks/usePageAuth.ts

@@ -1,50 +0,0 @@
-import { onLoad } from '@dcloudio/uni-app'
-import { useUserStore } from '@/store'
-import { needLoginPages as _needLoginPages, getNeedLoginPages } from '@/utils'
-
-const loginRoute = import.meta.env.VITE_LOGIN_URL
-const isDev = import.meta.env.DEV
-function isLogined() {
-  const userStore = useUserStore()
-  return !!userStore.userInfo.username
-}
-// 检查当前页面是否需要登录
-export function usePageAuth() {
-  onLoad((options) => {
-    // 获取当前页面路径
-    const pages = getCurrentPages()
-    const currentPage = pages[pages.length - 1]
-    const currentPath = `/${currentPage.route}`
-
-    // 获取需要登录的页面列表
-    let needLoginPages: string[] = []
-    if (isDev) {
-      needLoginPages = getNeedLoginPages()
-    }
-    else {
-      needLoginPages = _needLoginPages
-    }
-
-    // 检查当前页面是否需要登录
-    const isNeedLogin = needLoginPages.includes(currentPath)
-    if (!isNeedLogin) {
-      return
-    }
-
-    const hasLogin = isLogined()
-    if (hasLogin) {
-      return true
-    }
-
-    // 构建重定向URL
-    const queryString = Object.entries(options || {})
-      .map(([key, value]) => `${key}=${encodeURIComponent(String(value))}`)
-      .join('&')
-
-    const currentFullPath = queryString ? `${currentPath}?${queryString}` : currentPath
-    const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(currentFullPath)}`
-
-    // 重定向到登录页
-    uni.redirectTo({ url: redirectRoute })
-  })
-}

+ 32 - 1
src/pages/login/login.h5.vue

@@ -8,7 +8,35 @@
 </route>
 
 <script lang="ts" setup>
-//
+import { useUserStore } from '@/store/user'
+import { tabbarList } from '@/tabbar/config'
+import { isPageTabbar } from '@/tabbar/store'
+
+const redirectUrl = ref('')
+onLoad((options) => {
+  console.log('login options', options)
+  redirectUrl.value = options.redirectUrl || tabbarList[0].pagePath
+})
+const userStore = useUserStore()
+function doLogin() {
+  userStore.setUserInfo({
+    id: 1,
+    username: '菲鸽',
+    avatar: 'https://unibest.oss-cn-beijing.aliyuncs.com/avatar.png',
+    token: 'fake-token',
+  })
+  console.log(redirectUrl.value)
+  if (isPageTabbar(redirectUrl.value)) {
+    uni.switchTab({
+      url: `/${redirectUrl.value}`,
+    })
+  }
+  else {
+    uni.redirectTo({
+      url: `/${redirectUrl.value}`,
+    })
+  }
+}
 </script>
 
 <template>
@@ -17,6 +45,9 @@
       <view class="login__header__title">
         登录 h5
       </view>
+      <button class="mt-4 w-40 text-center" @click="doLogin">
+        点击模拟登录
+      </button>
     </view>
   </view>
 </template>

+ 8 - 5
src/router/interceptor.ts

@@ -5,7 +5,6 @@
  * 我这里应为大部分都可以随便进入,所以使用黑名单
  */
 import { useUserStore } from '@/store'
-import { tabbarStore } from '@/tabbar/store'
 import { getLastPage } from '@/utils'
 import { EXCLUDE_LIST, LOGIN_PAGE_LIST } from '../login/config'
 
@@ -30,12 +29,16 @@ export const navigateToInterceptor = {
       return
     }
 
-    tabbarStore.restorePrevIdx()
-
-    console.log('拦截器中得到的 path:', path)
     const userStore = useUserStore()
+    if (userStore.hasLogin) {
+      return
+    }
+
+    // tabbarStore.restorePrevIdx()
+
+    console.log('拦截器中得到的 path:', path, userStore.hasLogin)
 
-    if (userStore.hasLogin || [...EXCLUDE_LIST, ...LOGIN_PAGE_LIST].includes(path)) {
+    if ([...EXCLUDE_LIST, ...LOGIN_PAGE_LIST].includes(path)) {
       console.log('111')
       uni.navigateTo({ url: path })
       return

+ 1 - 0
src/store/user.ts

@@ -100,6 +100,7 @@ export const useUserStore = defineStore(
       userInfo,
       login,
       wxLogin,
+      setUserInfo,
       getUserInfo,
       setUserAvatar,
       logout,

+ 4 - 0
src/tabbar/store.ts

@@ -16,6 +16,10 @@ if (BULGE_ENABLE) {
 
 export { tabbarList }
 
+export function isPageTabbar(path: string) {
+  return tabbarList.some(item => item.pagePath === path)
+}
+
 /**
  * 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
  * tabbar 状态,增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面