feat: 增强认证流程，处理令牌失效和过期情况，优化用户体验

Sunwuyuan · Sunwuyuan · commit 05b5e5f6ce10 · 2026-02-23T16:11:40.000+08:00
diff --git a/src/axios/axios.js b/src/axios/axios.js
@@ -7,57 +7,72 @@ const BASE_URL = import.meta.env.VITE_APP_BASE_API;
 const axiosInstance = axios.create({
   baseURL: BASE_URL,
   withCredentials: true, // 携带 HttpOnly refresh cookie
-  // timeout: 8000,
 });
 
 const TOKEN_KEY = "token";
 const TOKEN_EXPIRES_AT_KEY = "tokenExpiresAt";
 const REFRESH_TOKEN_EXPIRES_AT_KEY = "refreshTokenExpiresAt";
+const USER_INFO_KEY = "userInfo";
 
-const FORCE_LOGOUT_CODES = new Set([
-  "ZC_ERROR_INVALID_REFRESH_TOKEN",
-  "ZC_ERROR_REFRESH_TOKEN_EXPIRED",
-]);
+// 后端统一错误码
+const ZC_ERROR = {
+  NEED_LOGIN: "ZC_ERROR_NEED_LOGIN",   // 未携带令牌
+  NEED_LOGOUT: "ZC_ERROR_NEED_LOGOUT", // 令牌无效/过期/已吊销/刷新失败
+  FORBIDDEN: "ZC_ERROR_FORBIDDEN",     // 已登录但无权限
+};
 
 export const TOKEN_REFRESHED_EVENT_NAME = "auth:token-refreshed";
 
 // 用独立 refresh client，避免走 axiosInstance 的响应拦截器（防递归）
 const refreshClient = axios.create({
   baseURL: BASE_URL,
   withCredentials: true,
-  // timeout: 8000,
 });
 
 let refreshPromise = null;
 
-const normalizeUrlPath = (url) => {
-  if (!url) return "";
-  try {
-    // 处理绝对 URL
-    if (url.startsWith("http://") || url.startsWith("https://")) {
-      return new URL(url).pathname;
-    }
-    // 处理相对 URL：确保能被 URL 解析
-    const base = BASE_URL?.startsWith("http") ? BASE_URL : "http://localhost";
-    return new URL(url, base).pathname;
-  } catch {
-    return String(url);
-  }
-};
+// 防止并发请求触发重复跳转
+let isRedirecting = false;
 
-const isRefreshEndpoint = (url) => {
-  const path = normalizeUrlPath(url);
-  return path === "/account/refresh-token";
-};
+const getErrorCode = (error) => error?.response?.data?.code || error?.code;
 
-const shouldForceLogoutByCode = (code) => FORCE_LOGOUT_CODES.has(code);
+/**
+ * 清除本地所有认证相关状态
+ */
+const clearLocalAuth = () => {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(TOKEN_EXPIRES_AT_KEY);
+  localStorage.removeItem(REFRESH_TOKEN_EXPIRES_AT_KEY);
+  localStorage.removeItem(USER_INFO_KEY);
+  localStorage.removeItem("sudo_token");
+  localStorage.removeItem("sudo_token_expires_at");
+  localStorage.removeItem("sudo_token_duration");
+};
 
-const getErrorCode = (error) => error?.response?.data?.code || error?.code;
+/**
+ * 处理 ZC_ERROR_NEED_LOGOUT：令牌已失效（过期/吊销/刷新失败等）
+ * 清除本地令牌 → 通知 store → 跳转登录页
+ */
+export const handleNeedLogout = () => {
+  if (isRedirecting) return;
+  isRedirecting = true;
+
+  clearLocalAuth();
+  window.dispatchEvent(new CustomEvent("forceLogout"));
+  window.location.href = "/?reason=session_expired";
+};
 
-const triggerForceLogout = () => {
-  if (typeof window !== "undefined") {
-    window.dispatchEvent(new CustomEvent("forceLogout"));
-  }
+/**
+ * 处理 ZC_ERROR_NEED_LOGIN：刷新令牌也失败后
+ * 清除本地登录态 → 通知 store → 跳转登录页
+ */
+export const handleNeedLogin = () => {
+  if (isRedirecting) return;
+  isRedirecting = true;
+
+  clearLocalAuth();
+  window.dispatchEvent(new CustomEvent("forceLogout"));
+  window.location.href = "/";
 };
 
 const emitTokenRefreshed = (refreshData) => {
@@ -77,12 +92,8 @@ const emitTokenRefreshed = (refreshData) => {
 const saveRefreshedToken = (refreshData) => {
   localStorage.setItem(TOKEN_KEY, refreshData.token);
 
-  // 这里保留后端给的 expires_at（若你 store 用 JWT exp 为准，也没问题）
   if (refreshData.expires_at) {
     localStorage.setItem(TOKEN_EXPIRES_AT_KEY, refreshData.expires_at);
-  } else {
-    // 如果后端不返回 expires_at，你也可以选择清掉，让 store 走 JWT exp
-    // localStorage.removeItem(TOKEN_EXPIRES_AT_KEY);
   }
 
   if (refreshData.refresh_expires_at) {
@@ -99,7 +110,7 @@ const performRefreshRequest = async () => {
   if (data.status !== "success" || !data.token) {
     const err = new Error(data.message || "Refresh token failed");
     err.code = data.code || "REFRESH_FAILED";
-    err.response = resp; // 保留一些上下文（可选）
+    err.response = resp;
     throw err;
   }
 
@@ -123,13 +134,11 @@ axiosInstance.interceptors.request.use(
   (config) => {
     const t = localStorage.getItem(TOKEN_KEY);
 
-    // AxiosHeaders / plain object 都兼容
     config.headers = config.headers || {};
 
     if (t) {
       config.headers.Authorization = `Bearer ${t}`;
     } else {
-      // 避免发送 Bearer null
       try {
         delete config.headers.Authorization;
       } catch {}
@@ -140,56 +149,51 @@ axiosInstance.interceptors.request.use(
   (error) => Promise.reject(error)
 );
 
-// 响应拦截器：401 → 刷新 → 重放
+// 响应拦截器：根据后端统一错误码处理认证问题
 axiosInstance.interceptors.response.use(
   (response) => response,
   async (error) => {
     const originalRequest = error?.config;
     const response = error?.response;
 
     // 没有响应（网络断开/超时）直接抛出
-    if (!originalRequest || !response) {
+    if (!response || !originalRequest) {
       return Promise.reject(error);
     }
 
-    // 刷新接口本身不参与重试
-    if (isRefreshEndpoint(originalRequest.url)) {
+    const errorCode = getErrorCode(error);
+
+    // ZC_ERROR_NEED_LOGOUT: 令牌已失效（过期/吊销/刷新失败等）
+    // 必须清除本地令牌，跳转登录页
+    if (errorCode === ZC_ERROR.NEED_LOGOUT) {
+      handleNeedLogout();
       return Promise.reject(error);
     }
 
-    // 只处理 401，且同一个请求只重试一次
-    if (response.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
+    // ZC_ERROR_NEED_LOGIN: 未携带令牌
+    // 先尝试刷新令牌，刷新成功则重放请求；失败则清除登录态并跳转
+    if (errorCode === ZC_ERROR.NEED_LOGIN && !originalRequest._retryAfterRefresh) {
+      originalRequest._retryAfterRefresh = true;
 
       try {
         const newToken = await requestTokenRefresh();
-
-        // 兼容 headers 类型：合并而不是替换
         originalRequest.headers = originalRequest.headers || {};
         originalRequest.headers.Authorization = `Bearer ${newToken}`;
-
         return axiosInstance(originalRequest);
-      } catch (refreshError) {
-        const code = getErrorCode(refreshError);
-
-        // 1) 明确的 refresh token 失效 → 强制登出
-        if (shouldForceLogoutByCode(code)) {
-          triggerForceLogout();
-          return Promise.reject(refreshError);
-        }
-
-        // 2) refresh 接口返回 401/403（有些后端不带业务 code）→ 也登出更合理
-        const refreshStatus = refreshError?.response?.status;
-        if (refreshStatus === 401 || refreshStatus === 403) {
-          triggerForceLogout();
-          return Promise.reject(refreshError);
-        }
-
-        // 3) 网络错误/500：不强制登出，让上层决定（可弹提示）
-        return Promise.reject(refreshError);
+      } catch {
+        // 刷新失败，清除登录态并跳转
+        handleNeedLogin();
+        return Promise.reject(error);
       }
     }
 
+    // 重试过仍然 NEED_LOGIN，直接跳转
+    if (errorCode === ZC_ERROR.NEED_LOGIN) {
+      handleNeedLogin();
+      return Promise.reject(error);
+    }
+
+    // 其他错误（包括 ZC_ERROR_FORBIDDEN）由调用方自行处理
     return Promise.reject(error);
   }
 );
diff --git a/src/components/account/LoginDialog.vue b/src/components/account/LoginDialog.vue
@@ -1,10 +1,6 @@
 <template>
   <v-dialog v-model="dialogVisible" width="400">
-    <template v-slot:activator="{ props }">
-      <slot name="activator" :props="props">
-        <v-btn rounded="xl" v-bind="props">登录</v-btn>
-      </slot>
-    </template>
+
 
     <v-card rounded="xl">
       <v-card-title></v-card-title>
diff --git a/src/pages/app/account/login.vue b/src/pages/app/account/login.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
-    <AuthCard subtitle="登录你的账户">
+    <AuthCard :subtitle="subtitle">
+      <v-alert
+        v-if="reason === 'session_expired'"
+        type="warning"
+        variant="tonal"
+        class="mb-4"
+        text="您的登录状态已失效，请重新登录"
+      />
       <LoginForm @login-success="handleLoginSuccess" @login-error="handleLoginError"/>
     </AuthCard>
   </div>
@@ -22,6 +29,12 @@ export default {
     const router = useRouter();
     const authStore = useAuthStore();
 
+    const reason = route.query.reason || null;
+
+    const subtitle = reason === "session_expired"
+      ? "会话已过期，请重新登录"
+      : "登录你的账户";
+
     // Capture redirect from query or sessionStorage
     const redirectFromQuery = route.query.redirect
       ? decodeURIComponent(route.query.redirect)
@@ -30,8 +43,8 @@ export default {
       authStore.setAuthRedirectUrl(redirectFromQuery);
     }
 
-    // Check if user is already logged in
-    if (localuser.isLogin.value === true) {
+    // Check if user is already logged in (skip if session expired)
+    if (!reason && localuser.isLogin.value === true) {
       router.push(authStore.consumeAuthRedirectUrl());
     }
 
@@ -50,6 +63,8 @@ export default {
     };
 
     return {
+      reason,
+      subtitle,
       handleLoginSuccess,
       handleLoginError,
     };
diff --git a/src/pages/app/account/logout.vue b/src/pages/app/account/logout.vue
@@ -12,39 +12,40 @@
   </v-container>
 </template>
 
-<script>
-import {localuser} from "@/services/localAccount";
-import {useHead} from "@unhead/vue";
-
-export default {
-  data() {
-    return {
-      titlemessage: "正在退出账户",
-      log: "",
-    };
-  },
-  setup() {
-    useHead({
-      title: "退出",
-    });
-  },
-  async created() {
-    this.log = "正在退出账户...";
-
-    try {
-      // 使用新的异步注销方法
-      await localuser.logout(true);
-      this.titlemessage = "已成功退出";
-      this.log = "您已安全退出账户。请关闭此标签页并刷新其他标签页。";
-
-      // 3秒后跳转到登录页面
-      setTimeout(() => {
-        this.$router.push('/app/account/login');
-      }, 3000);
-    } catch (error) {
-      this.titlemessage = "退出时发生错误";
-      this.log = error.message || "未知错误，请稍后重试";
-    }
-  },
-};
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
+import { useNotificationStore } from "@/stores/notification";
+import { useHead } from "@unhead/vue";
+
+useHead({
+  title: "退出",
+});
+
+const router = useRouter();
+const authStore = useAuthStore();
+const notificationStore = useNotificationStore();
+const titlemessage = ref("正在退出账户");
+const log = ref("");
+
+onMounted(async () => {
+  log.value = "正在退出账户...";
+
+  try {
+    await authStore.logout(true);
+  } catch {
+    // 即使出错也继续清理
+  }
+
+  // 清除其他 store 中的用户数据
+  notificationStore.resetUnreadCount();
+
+  titlemessage.value = "已成功退出";
+  log.value = "您已安全退出账户，正在返回首页...";
+
+  setTimeout(() => {
+    router.push("/");
+  }, 1000);
+});
 </script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -152,7 +152,8 @@ const loadFeed = async (isInitial = false) => {
     const res = await PostsService.getFeed({
       cursor: isInitial ? undefined : cursor.value,
       limit: 20,
-      includeReplies: false
+      includeReplies: false,
+      followingOnly: feedType.value === 'following'
     });
 
     if (isInitial) {
diff --git a/src/services/postsService.js b/src/services/postsService.js
@@ -323,11 +323,13 @@ export const PostsService = {
    * @param {string} options.cursor - 分页游标
    * @param {number} options.limit - 每页数量
    * @param {boolean} options.includeReplies - 是否包含回复
+   * @param {boolean} options.followingOnly - 是否仅显示已关注用户的帖子
    */
-  async getFeed({ cursor, limit = 20, includeReplies = false } = {}) {
+  async getFeed({ cursor, limit = 20, includeReplies = false, followingOnly = false } = {}) {
     try {
       const params = { limit, include_replies: String(includeReplies) };
       if (cursor) params.cursor = cursor;
+      if (followingOnly) params.following_only = 'true';
       const response = await axios.get('/posts/feed', { params });
       return normalizeListResponse(response.data);
     } catch (error) {
diff --git a/src/stores/auth.js b/src/stores/auth.js
