@jx3box/jx3box-ui 2.3.13 → 2.3.15

package/docs/agents/auth-token-refresh.md

@@ -41,6 +41,16 @@ PC 公共库存在马甲切换：
 
 否则用户切换马甲时可能拿回旧 token，或者后续请求继续优先使用旧 `__token`。
 
+马甲切换时必须先将目标马甲的 token 同步到 `localStorage.__token`；如果当前标签页存在
+`sessionStorage.__token`，也要一起更新，然后才能调用 refresh 接口。退出登录（包括
+`token_version` 触发的强制退出）时必须同时清理这两个 `__token`。否则业务页可能从普通
+`uid` 读取新账号，而接口仍携带旧账号的高优先级 token，最终在同一页面显示两个 UID。
+
+新增马甲跳转登录页前也要先清理两个 `__token`，因为账号页登录成功默认只更新普通
+`token/uid`。公共头拿到 `/user/my/info` 后，如果接口 UID 与本地 UID 不一致、当前又不是
+显式 `?__token=` 入口，应清除遗留覆盖 token 并刷新一次完成自愈。显式 URL token 入口则
+强制执行一次 refresh，把普通用户缓存归一到 URL token 对应的账号；UID 发生变化时刷新页面。
+
 ## 自动续期开关
 
 默认开启。可通过 localStorage 关闭：
@@ -51,6 +61,9 @@ localStorage.setItem("jx3box:auto_refresh_token", "false");
 
 值为 `"false"` 或 `"0"` 时不自动续期；其它情况按默认开启处理。
 
+该开关只控制后台自动续期。马甲切换和显式 URL token 身份归一属于用户主动登录流程，使用
+`force` 刷新，不受此开关影响。
+
 ## 失败语义
 
 自动续期失败不主动登出，也不阻断公共头渲染。后续业务请求如果发现 token 过期或无权限，仍按宿主项目既有鉴权失败逻辑处理。

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.13",
+    "version": "2.3.15",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/CommonHeader.vue

@@ -84,7 +84,7 @@ import miniprogram from "@jx3box/jx3box-common/data/miniprogram.json";
 // 数据
 import { getGlobalConfig } from "../service/header";
 import { getConfig, getMyAccountStatus } from "../service/cms";
-import { refreshTokenIfNeeded } from "./utils/auth-token-refresh";
+import { clearActiveAuthToken, refreshTokenIfNeeded } from "./utils/auth-token-refresh";
 import User from "@jx3box/jx3box-common/js/user.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
@@ -194,7 +194,7 @@ export default {
 
             if (User.isLogin()) {
                 this.loadAsset();
-                this.refreshAuthToken();
+                this.refreshAuthToken({ force: !!token, reloadOnIdentityChange: !!token });
                 this.initAccountReadyState();
             }
 
@@ -209,23 +209,27 @@ export default {
                         // 先保存最新的token_version
                         localStorage.setItem("token_version", global_token_version);
                         // 然后执行登出操作
-                        User.destroy().then(() => {
-                            this.$refs.user?.logout();
-                            // 清除马甲所有马甲信息
-                            let keys = Object.keys(localStorage);
-                            let alternate = keys.filter((key) => key.startsWith("jx3box-alternate-"));
-
-                            alternate.forEach((key) => {
-                                localStorage.removeItem(key);
+                        User.destroy()
+                            .finally(() => {
+                                clearActiveAuthToken();
+                            })
+                            .then(() => {
+                                this.$refs.user?.logout();
+                                // 清除马甲所有马甲信息
+                                let keys = Object.keys(localStorage);
+                                let alternate = keys.filter((key) => key.startsWith("jx3box-alternate-"));
+
+                                alternate.forEach((key) => {
+                                    localStorage.removeItem(key);
+                                });
+
+                                if (
+                                    location.pathname.startsWith("/dashboard") ||
+                                    location.pathname.startsWith("/publish")
+                                ) {
+                                    location.href = this.siteRoot;
+                                }
                             });
-
-                            if (
-                                location.pathname.startsWith("/dashboard") ||
-                                location.pathname.startsWith("/publish")
-                            ) {
-                                location.href = this.siteRoot;
-                            }
-                        });
                     }
                 } else {
                     // 非登录状态也更新token_version，确保用户下次登录时使用新版本
@@ -236,10 +240,23 @@ export default {
             });
         },
 
-        refreshAuthToken: function () {
-            refreshTokenIfNeeded().catch(() => {
-                // 自动续期失败不影响公共头渲染，后续鉴权请求会按既有逻辑处理登录态。
-            });
+        refreshAuthToken: function ({ force = false, reloadOnIdentityChange = false } = {}) {
+            const previousUid = User.getInfo()?.uid;
+            return refreshTokenIfNeeded({ force })
+                .then((refreshed) => {
+                    if (
+                        refreshed &&
+                        reloadOnIdentityChange &&
+                        String(previousUid || "") !== String(User.getInfo()?.uid || "")
+                    ) {
+                        location.reload();
+                    }
+                    return refreshed;
+                })
+                .catch(() => {
+                    // 自动续期失败不影响公共头渲染，后续鉴权请求会按既有逻辑处理登录态。
+                    return false;
+                });
         },
 
         handleVisibilityChange: function () {

package/src/filters/clientBy.vue

@@ -36,6 +36,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        autoDetect: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function () {
         return {
@@ -57,6 +61,11 @@ export default {
             return this.clients || clients;
         },
     },
+    watch: {
+        type: function (value) {
+            this.client = value || "";
+        },
+    },
     methods: {
         filter: function (val) {
             this.client = val;
@@ -65,11 +74,9 @@ export default {
         },
     },
     mounted: function () {
-        const client = location.href.includes("origin") ? "origin" : "std";
-        if (client) {
-            this.client = client;
-            this.filter(this.client);
-        }
+        if (!this.autoDetect) return;
+        const client = location.hostname.includes("origin") ? "origin" : "std";
+        this.filter(client);
     },
 };
 </script>

package/src/header/alternate.vue

@@ -47,7 +47,7 @@ import { showAvatar } from "@jx3box/jx3box-common/js/utils";
 import dayjs from "dayjs";
 import User from "@jx3box/jx3box-common/js/user";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
-import { refreshAuth } from "../../service/cms";
+import { clearActiveAuthToken, refreshTokenIfNeeded, syncActiveAuthToken } from "../utils/auth-token-refresh";
 import i18nMixin from "../../i18n/mixin";
 export default {
     name: "AlternateSwitch",
@@ -162,8 +162,11 @@ export default {
                     type: "warning",
                 }
             )
-                .then(() => {
-                    User.update(item).then(async () => {
+                .then(async () => {
+                    await User.update(item);
+                    // 请求层优先读取 __token；必须与刚切换的马甲 token 同步，避免继续请求旧账号。
+                    syncActiveAuthToken(item.token);
+                    try {
                         localStorage.setItem(
                             "jx3box-alternate-" + item.uid,
                             JSON.stringify({
@@ -171,10 +174,11 @@ export default {
                                 created_at: Number(localStorage.getItem("created_at")),
                             })
                         );
-                        await refreshAuth();
+                        await refreshTokenIfNeeded({ force: true });
+                    } finally {
                         location.reload();
                         this.visible = false;
-                    });
+                    }
                 })
                 .catch(() => {});
         },
@@ -202,6 +206,8 @@ export default {
                 this.$message.error(this.$jx3boxT("jx3boxUi.commonHeader.alternate.maxFive", "最多只能添加5个马甲"));
                 return;
             }
+            // 新账号登录只会写普通 token；先清掉当前账号的高优先级 token，避免登录完成后仍请求旧账号。
+            clearActiveAuthToken();
             // 跳转至登录页
             location.href = JX3BOX.__Links.account.login + "?alternate=1";
         },

package/src/header/userInfo.vue

@@ -129,6 +129,7 @@ import { getMenu } from "../../service/header";
 import Bus from "../../utils/bus";
 import alternate from "./alternate.vue";
 import i18nMixin from "../../i18n/mixin";
+import { clearActiveAuthToken, hasActiveAuthTokenOverride } from "../utils/auth-token-refresh";
 
 const { __Links, __Root, __imgPath, __OriginRoot } = JX3BOX;
 export default {
@@ -211,6 +212,9 @@ export default {
         showAvatar,
         logout: function (mute = false) {
             User.destroy()
+                .finally(() => {
+                    clearActiveAuthToken();
+                })
                 .then(() => {
                     this.$emit("logout");
 
@@ -239,9 +243,29 @@ export default {
         showUserName: function (val) {
             return val || this.$jx3boxT("jx3boxUi.commonHeader.anonymous", "匿名");
         },
+        repairMismatchedIdentity: function (data = {}) {
+            const cachedUid = Number(User.getInfo()?.uid || 0);
+            const requestUid = Number(data.ID || 0);
+            const hasUrlToken = new URLSearchParams(location.search).has("__token");
+
+            if (
+                cachedUid &&
+                requestUid &&
+                cachedUid !== requestUid &&
+                hasActiveAuthTokenOverride() &&
+                !hasUrlToken
+            ) {
+                clearActiveAuthToken();
+                location.reload();
+                return true;
+            }
+            return false;
+        },
         loadMyInfo: function () {
             getMyInfo()
                 .then((data) => {
+                    // 普通 uid 与接口身份不一致时，优先清除遗留的高优先级 token 并重新请求一次。
+                    if (this.repairMismatchedIdentity(data)) return;
                     this.user = data;
                     this.isSuperAuthor = !!data.sign;
                     this.isTeammate = this.user?.is_teammate;

package/src/stories/filters/FilterGallery.stories.js

@@ -52,6 +52,7 @@ export const Default = {
                             { name: 'type / value', type: 'String', default: '""', description: '当前激活项。' },
                             { name: 'clients', type: 'Object', default: 'null', description: 'clientBy 自定义客户端列表。' },
                             { name: 'showWujie', type: 'Boolean', default: 'false', description: 'clientBy 是否展示无界。' },
+                            { name: 'autoDetect', type: 'Boolean', default: 'true', description: '是否在挂载时根据站点 hostname 自动选择客户端；受控场景传 false。' },
                         ],
                     },
                     {

package/src/stories/filters/clientBy.stories.js

@@ -17,6 +17,7 @@ export const Default = {
                 { name: 'type', type: 'String', default: '""', description: '当前选中的客户端值。' },
                 { name: 'clients', type: 'Object', default: 'null', description: '自定义客户端映射。' },
                 { name: 'showWujie', type: 'Boolean', default: 'false', description: '是否显示无界。' },
+                { name: 'autoDetect', type: 'Boolean', default: 'true', description: '是否根据站点 hostname 自动选择客户端；受控场景传 false。' },
             ] };
         },
         template: `<div style="display:grid;gap:24px;"><section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);"><clientBy :show-wujie="true" /></section><StoryPropsTable title="clientBy" description="客户端筛选组件。" :items="propsInfo" /></div>`,

package/src/utils/auth-token-refresh.js

@@ -11,6 +11,42 @@ function canUseLocalStorage() {
     return typeof localStorage !== "undefined";
 }
 
+function canUseSessionStorage() {
+    return typeof sessionStorage !== "undefined";
+}
+
+export function syncActiveAuthToken(token = "") {
+    if (!token) {
+        return false;
+    }
+
+    if (canUseLocalStorage()) {
+        localStorage.setItem("__token", token);
+    }
+
+    // URL token 会被 common 缓存在 sessionStorage，存在时也必须随账号切换一起更新。
+    if (canUseSessionStorage() && sessionStorage.getItem("__token")) {
+        sessionStorage.setItem("__token", token);
+    }
+
+    return true;
+}
+
+export function hasActiveAuthTokenOverride() {
+    const localToken = canUseLocalStorage() ? localStorage.getItem("__token") : "";
+    const sessionToken = canUseSessionStorage() ? sessionStorage.getItem("__token") : "";
+    return !!(localToken || sessionToken);
+}
+
+export function clearActiveAuthToken() {
+    if (canUseLocalStorage()) {
+        localStorage.removeItem("__token");
+    }
+    if (canUseSessionStorage()) {
+        sessionStorage.removeItem("__token");
+    }
+}
+
 function decodeBase64Url(value = "") {
     const normalized = String(value).replace(/-/g, "+").replace(/_/g, "/");
     const padded = normalized.padEnd(normalized.length + ((4 - (normalized.length % 4)) % 4), "=");
@@ -120,8 +156,8 @@ async function applyRefreshResult(data = {}) {
 
     await User.update(profile);
 
-    // @jx3box/common User.update only writes token; keep __token in sync because common API reads it first.
-    localStorage.setItem("__token", profile.token);
+    // @jx3box/common User.update only writes token; keep higher-priority request tokens in sync too.
+    syncActiveAuthToken(profile.token);
     updateCurrentAlternate(profile);
     return true;
 }
@@ -129,7 +165,7 @@ async function applyRefreshResult(data = {}) {
 export async function refreshTokenIfNeeded(options = {}) {
     const { force = false } = options;
 
-    if (!User.isLogin() || !isAutoTokenRefreshEnabled()) {
+    if (!User.isLogin() || (!force && !isAutoTokenRefreshEnabled())) {
         return false;
     }
 

package/tests/auth-token-refresh.test.js

@@ -3,6 +3,8 @@ const path = require("path");
 
 const root = path.resolve(__dirname, "..");
 const commonHeader = fs.readFileSync(path.join(root, "src/CommonHeader.vue"), "utf8");
+const alternate = fs.readFileSync(path.join(root, "src/header/alternate.vue"), "utf8");
+const userInfo = fs.readFileSync(path.join(root, "src/header/userInfo.vue"), "utf8");
 const cmsService = fs.readFileSync(path.join(root, "service/cms.js"), "utf8");
 const refreshUtil = fs.readFileSync(path.join(root, "src/utils/auth-token-refresh.js"), "utf8");
 const docs = fs.readFileSync(path.join(root, "docs/agents/auth-token-refresh.md"), "utf8");
@@ -32,16 +34,54 @@ assert(
     "minimum refresh interval should be 1 day"
 );
 
+assert(
+    refreshUtil.includes("(!force && !isAutoTokenRefreshEnabled())"),
+    "explicit account switching and URL-token normalization should bypass the automatic refresh toggle"
+);
+
 assert(
     refreshUtil.includes('localStorage.getItem("__token") || localStorage.getItem("token")'),
     "refresh should read __token before token"
 );
 
 assert(
-    refreshUtil.includes("localStorage.setItem(\"__token\", profile.token)"),
+    refreshUtil.includes("syncActiveAuthToken(profile.token)"),
     "refresh should keep __token in sync"
 );
 
+assert(
+    refreshUtil.includes('sessionStorage.getItem("__token")') &&
+        refreshUtil.includes('sessionStorage.setItem("__token", token)'),
+    "refresh should update an existing URL token stored in sessionStorage"
+);
+
+assert(
+    alternate.includes("syncActiveAuthToken(item.token)") &&
+        alternate.indexOf("syncActiveAuthToken(item.token)") < alternate.indexOf("refreshTokenIfNeeded({ force: true })"),
+    "alternate switching should synchronize the selected token before refreshing auth"
+);
+
+assert(
+    alternate.includes("clearActiveAuthToken()") &&
+        alternate.indexOf("clearActiveAuthToken()") < alternate.indexOf('location.href = JX3BOX.__Links.account.login'),
+    "adding an alternate should clear the previous account override token before login"
+);
+
+assert(
+    userInfo.includes("clearActiveAuthToken()") && commonHeader.includes("clearActiveAuthToken()"),
+    "manual and token-version logout should clear higher-priority request tokens"
+);
+
+assert(
+    userInfo.includes("repairMismatchedIdentity") && userInfo.includes("hasActiveAuthTokenOverride()"),
+    "header profile should repair a cached uid that conflicts with the authenticated request uid"
+);
+
+assert(
+    commonHeader.includes("reloadOnIdentityChange") && commonHeader.includes("refreshTokenIfNeeded({ force })"),
+    "URL token entry should normalize the cached identity and reload when the uid changes"
+);
+
 assert(
     refreshUtil.includes("jx3box-alternate-${profile.uid}"),
     "refresh should update the current alternate account cache"

package/tests/client-by-controlled.test.js

@@ -0,0 +1,79 @@
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+const test = require("node:test");
+
+function loadComponentOptions() {
+    const filename = path.resolve(__dirname, "../src/filters/clientBy.vue");
+    const source = fs.readFileSync(filename, "utf8");
+    const script = source.match(/<script>([\s\S]*?)<\/script>/)?.[1] || "";
+    const executable = script
+        .replace(/^\s*import\s+[^;]+;\s*$/gm, "")
+        .replace(/export\s+default\s+/, "return ");
+    return Function("i18nMixin", executable)({});
+}
+
+function createVm({ type = "", autoDetect = false } = {}) {
+    const events = [];
+    return {
+        vm: {
+            type,
+            autoDetect,
+            client: type || "",
+            $emit(name, payload) {
+                events.push({ name, payload });
+            },
+            $forceUpdate() {},
+        },
+        events,
+    };
+}
+
+const component = loadComponentOptions();
+
+test("clientBy keeps automatic site detection enabled by default", () => {
+    assert.equal(component.props.autoDetect.default, true);
+});
+
+test("controlled mode keeps all selected and does not emit while mounting", () => {
+    const { vm, events } = createVm({ type: "all", autoDetect: false });
+
+    component.mounted.call(vm);
+
+    assert.equal(vm.client, "all");
+    assert.deepEqual(events, []);
+});
+
+test("external type updates only synchronize selection", () => {
+    const { vm, events } = createVm({ type: "all", autoDetect: false });
+
+    component.watch.type.call(vm, "origin");
+
+    assert.equal(vm.client, "origin");
+    assert.deepEqual(events, []);
+});
+
+test("user selection emits the existing filter payload", () => {
+    const { vm, events } = createVm({ type: "all", autoDetect: false });
+
+    component.methods.filter.call(vm, "std");
+
+    assert.equal(vm.client, "std");
+    assert.deepEqual(events, [{ name: "filter", payload: { type: "client", val: "std" } }]);
+});
+
+test("automatic mode only detects origin from hostname", () => {
+    const previousLocation = global.location;
+    global.location = { hostname: "origin.jx3box.com" };
+    const { vm, events } = createVm({ autoDetect: true });
+    vm.filter = component.methods.filter;
+
+    try {
+        component.mounted.call(vm);
+    } finally {
+        global.location = previousLocation;
+    }
+
+    assert.equal(vm.client, "origin");
+    assert.deepEqual(events, [{ name: "filter", payload: { type: "client", val: "origin" } }]);
+});