Explorar el Código

feat(router): 完善登录拦截逻辑和路由处理

增加登录状态检查和重定向逻辑
添加 HOME_PAGE 常量导出
优化 tabbar 路径匹配逻辑
导出 setTokenInfo 方法供外部使用
启用路由拦截器日志
feige996 hace 8 meses
padre
commit
a0d8b82979

+ 1 - 1
src/pages/about/about.vue

@@ -24,7 +24,7 @@ console.log({ isApp, isAppAndroid, isAppHarmony, isAppIOS, isAppPlus, isH5, isMp
 
 function toLogin() {
   uni.navigateTo({
-    url: `${LOGIN_PAGE}?redirect=${encodeURIComponent('/pages/about/about')}`,
+    url: `${LOGIN_PAGE}?redirect=${encodeURIComponent('/pages/about/about?a=1&b=2')}`,
   })
 }
 

+ 7 - 0
src/pages/login/login.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useTokenStore } from '@/store/token'
 import { useUserStore } from '@/store/user'
 import { tabbarList } from '@/tabbar/config'
 import { isPageTabbar } from '@/tabbar/store'
@@ -24,6 +25,7 @@ onLoad((options) => {
 })
 
 const userStore = useUserStore()
+const tokenStore = useTokenStore()
 function doLogin() {
   userStore.setUserInfo({
     userId: 123456,
@@ -31,6 +33,11 @@ function doLogin() {
     nickname: '菲鸽',
     avatar: 'https://oss.laf.run/ukw0y1-site/avatar.jpg',
   })
+  // 这里用单token来模拟
+  tokenStore.setTokenInfo({
+    token: '123456',
+    expiresIn: 60 * 60 * 24 * 7,
+  })
   console.log(redirectUrl.value)
   let path = redirectUrl.value
   if (!path.startsWith('/')) {

+ 1 - 0
src/router/config.ts

@@ -8,6 +8,7 @@ export const LOGIN_STRATEGY_MAP = {
 export const LOGIN_STRATEGY = LOGIN_STRATEGY_MAP.DEFAULT_NO_NEED_LOGIN
 export const isNeedLoginMode = LOGIN_STRATEGY === LOGIN_STRATEGY_MAP.DEFAULT_NEED_LOGIN
 
+export const HOME_PAGE = '/pages/index/index'
 export const LOGIN_PAGE = '/pages/login/login'
 export const REGISTER_PAGE = '/pages/login/register'
 

+ 51 - 28
src/router/interceptor.ts

@@ -4,13 +4,19 @@
  * 黑白名单的配置,请看 config.ts 文件, EXCLUDE_LOGIN_PATH_LIST
  */
 import { useTokenStore } from '@/store/token'
-import { tabbarStore } from '@/tabbar/store'
+import { isPageTabbar, tabbarStore } from '@/tabbar/store'
 import { getAllPages, getLastPage, parseUrlToObj } from '@/utils/index'
-import { EXCLUDE_LOGIN_PATH_LIST, isNeedLoginMode, LOGIN_PAGE, LOGIN_PAGE_LIST } from './config'
+import { EXCLUDE_LOGIN_PATH_LIST, HOME_PAGE, isNeedLoginMode, LOGIN_PAGE } from './config'
 
 const isDev = import.meta.env.DEV
 export const FG_LOG_ENABLE = false
-
+export function judgeIsExcludePath(path: string) {
+  if (!isDev) {
+    return EXCLUDE_LOGIN_PATH_LIST.includes(path)
+  }
+  const allExcludeLoginPages = getAllPages('excludeLoginPath') // dev 环境下,需要每次都重新获取,否则新配置就不会生效
+  return EXCLUDE_LOGIN_PATH_LIST.includes(path) || (isDev && allExcludeLoginPages.some(page => page.path === path))
+}
 // 黑名单登录拦截器 - (适用于大部分页面不需要登录,少部分页面需要登录)
 export const navigateToInterceptor = {
   // 注意,这里的url是 '/' 开头的,如 '/pages/index/index',跟 'pages.json' 里面的 path 不同
@@ -21,6 +27,7 @@ export const navigateToInterceptor = {
     }
     let { path, query: _query } = parseUrlToObj(url)
 
+    FG_LOG_ENABLE && console.log('\n\n路由拦截器:-------------------------------------')
     FG_LOG_ENABLE && console.log('路由拦截器 1: url->', url, ', query ->', query)
     const myQuery = { ..._query, ...query }
     // /pages/route-interceptor/index?name=feige&age=30
@@ -38,9 +45,25 @@ export const navigateToInterceptor = {
     // 处理直接进入路由非首页时,tabbarIndex 不正确的问题
     tabbarStore.setAutoCurIdx(path)
 
-    if (LOGIN_PAGE_LIST.includes(path)) {
-      FG_LOG_ENABLE && console.log('命中了 LOGIN_PAGE_LIST')
-      return true // 明确表示允许路由继续执行
+    const tokenStore = useTokenStore()
+    FG_LOG_ENABLE && console.log('tokenStore.hasLogin:', tokenStore.hasLogin)
+
+    // 不管黑白名单,登录了就直接去吧(但是当前不能是登录页)
+    if (tokenStore.hasLogin) {
+      if (path !== LOGIN_PAGE) {
+        return true // 明确表示允许路由继续执行
+      }
+      else {
+        console.log('已经登录,但是还在登录页', myQuery.redirect)
+        const url = myQuery.redirect || HOME_PAGE
+        if (isPageTabbar(url)) {
+          uni.switchTab({ url })
+        }
+        else {
+          uni.navigateTo({ url })
+        }
+        return true // 明确表示阻止原路由继续执行
+      }
     }
     let fullPath = path
 
@@ -49,40 +72,40 @@ export const navigateToInterceptor = {
     }
     const redirectUrl = `${LOGIN_PAGE}?redirect=${encodeURIComponent(fullPath)}`
 
-    const tokenStore = useTokenStore()
-    FG_LOG_ENABLE && console.log('tokenStore.hasLogin:', tokenStore.hasLogin)
-
-    // #region 1/2 需要登录的情况 ---------------------------
+    // #region 1/2 需要登录的情况(白名单策略) ---------------------------
     if (isNeedLoginMode) {
-      if (tokenStore.hasLogin) {
+      // 需要登录里面的 EXCLUDE_LOGIN_PATH_LIST 表示白名单,可以直接通过
+      if (judgeIsExcludePath(path)) {
         return true // 明确表示允许路由继续执行
       }
+      // 否则需要重定向到登录页
       else {
-        const allExcludeLoginPages = getAllPages('excludeLoginPath') // dev 环境下,需要每次都重新获取,否则新配置就不会生效
-        // 需要登录里面的 EXCLUDE_LOGIN_PATH_LIST 表示白名单,可以直接通过
-        if (EXCLUDE_LOGIN_PATH_LIST.includes(path) || (isDev && allExcludeLoginPages.some(page => page.path === path))) {
-          return true // 明确表示允许路由继续执行
-        }
-        // 否则需要重定向到登录页
-        else {
-          FG_LOG_ENABLE && console.log('1 isNeedLogin redirectUrl:', redirectUrl)
-          uni.navigateTo({ url: redirectUrl })
-          return false // 明确表示阻止原路由继续执行
-        }
+        FG_LOG_ENABLE && console.log('1 isNeedLogin(白名单策略) redirectUrl:', redirectUrl)
+        uni.navigateTo({ url: redirectUrl })
+        return false // 明确表示阻止原路由继续执行
       }
     }
-    // #endregion 1/2 需要登录的情况 ---------------------------
+    // #endregion 1/2 需要登录的情况(白名单策略) ---------------------------
 
-    // #region 2/2 不需要登录的情况 ---------------------------
+    // #region 2/2 不需要登录的情况(黑名单策略) ---------------------------
     else {
       // 不需要登录里面的 EXCLUDE_LOGIN_PATH_LIST 表示黑名单,需要重定向到登录页
-      if (EXCLUDE_LOGIN_PATH_LIST.includes(path)) {
-        FG_LOG_ENABLE && console.log('2 isNeedLogin redirectUrl:', redirectUrl)
+      if (judgeIsExcludePath(path)) {
+        FG_LOG_ENABLE && console.log('2 isNeedLogin(黑名单策略) redirectUrl:', redirectUrl)
+
+        // 如果当前路由是登录页,那就重定向走
+        const { path, query } = parseUrlToObj(redirectUrl)
+        if (path === LOGIN_PAGE) {
+          console.log('path:', path)
+          console.log('query:', query)
+          uni.navigateTo({ url: query.redirect })
+          return false // 明确表示阻止原路由继续执行
+        }
         uni.navigateTo({ url: redirectUrl })
-        return false // 明确表示阻止原路由继续执行
+        return false // 修改为false,阻止原路由继续执行
       }
     }
-    // #endregion 2/2 不需要登录的情况 ---------------------------
+    // #endregion 2/2 不需要登录的情况(黑名单策略) ---------------------------
     return true // 明确表示允许路由继续执行
   },
 }

+ 1 - 0
src/store/token.ts

@@ -268,6 +268,7 @@ export const useTokenStore = defineStore(
 
       // 调试或特殊场景可能需要直接访问的信息
       tokenInfo,
+      setTokenInfo,
     }
   },
   {

+ 2 - 1
src/tabbar/store.ts

@@ -23,7 +23,8 @@ if (customTabbarEnable && BULGE_ENABLE) {
 }
 
 export function isPageTabbar(path: string) {
-  return tabbarList.some(item => item.pagePath === path)
+  const _path = path.split('?')[0]
+  return tabbarList.some(item => item.pagePath === _path)
 }
 
 /**