@tsingroc/tsingroc-components 5.0.0-alpha.18 → 5.0.0-alpha.20

package/dist/components/Auth.d.ts

@@ -175,9 +175,13 @@ interface CommonAuth {
     logout(redirect?: string): void;
     /**
      * 以当前用户的 access token 作为 bearer token 发起请求。
-     * 用法与正常的 {@linkcode fetch} 完全一致。未登录时，返回的 Promise 会立即失败。
+     * 用法与正常的 {@linkcode fetch} 完全一致。未登录时，返回的 Promise 会立即抛出异常。
+     * 如果请求返回的状态码是 401，则会自动跳转到登录页。可以使用 `options.redirectOn401`
+     * 选项关闭这个行为。
      */
-    fetchWithAuth(resource: RequestInfo | URL, options?: RequestInit): Promise<Response>;
+    fetchWithAuth(resource: RequestInfo | URL, options?: RequestInit & {
+        redirectOn401?: boolean;
+    }): Promise<Response>;
     /** 用户的个人信息，未经过 {@linkcode AuthCheck} 验证时为空。*/
     userInfo?: UserInfo;
     /** Access Token，未登录时为空。*/

package/dist/components/Auth.js

@@ -1,6 +1,7 @@
+import { c as _c } from "react/compiler-runtime";
 import Sdk from "casdoor-js-sdk";
 import { jwtDecode } from "jwt-decode";
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const commonAuth = (user, setUser) => ({
   logout(redirect) {
@@ -19,10 +20,16 @@ const commonAuth = (user, setUser) => ({
     if (!headers.has("Authorization")) {
       headers.set("Authorization", `Bearer ${token}`);
     }
-    return await fetch(resource, {
+    const resp = await fetch(resource, {
       ...options,
       headers
     });
+    if ((options?.redirectOn401 ?? true) && resp.status === 401) {
+      localStorage.removeItem("access_token");
+      setUser({});
+      throw new Error("登陆状态无效！");
+    }
+    return resp;
   }
 });
 function casdoorAuth(user, setUser, sdkConfig, signinOrigin, signinPath) {
@@ -209,29 +216,56 @@ export function AuthProvider(props) {
  * 该组件必须在 {@linkcode AuthProvider} 内部才能使用。
  */
 export function AuthCheck(props) {
+  const $ = _c(8);
   const auth = useAuth("AuthCheck");
   const userInfo = auth.userInfo;
-  // 用于确保在 Strict Mode 下副作用也只执行一次
   const effectDone = useRef(false);
-  useEffect(() => {
-    if (effectDone.current) return;
-    effectDone.current = true;
-    if (!auth.userInfo) {
-      auth.validate().catch(props.onFail ?? (() => {
-        auth.login(location.href);
-      }));
-    }
-    // 这个副作用只在首次渲染时执行
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  let t0;
+  if ($[0] !== auth || $[1] !== props.onFail) {
+    t0 = () => {
+      auth.validate().catch(props.onFail ?? (() => auth.login(location.href)));
+    };
+    $[0] = auth;
+    $[1] = props.onFail;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const onUnloggedIn = useEffectEvent(t0);
+  let t1;
+  if ($[3] !== auth.userInfo || $[4] !== onUnloggedIn) {
+    t1 = () => {
+      if (effectDone.current) {
+        return;
+      }
+      effectDone.current = true;
+      if (!auth.userInfo) {
+        onUnloggedIn();
+      }
+    };
+    $[3] = auth.userInfo;
+    $[4] = onUnloggedIn;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== auth) {
+    t2 = [auth];
+    $[6] = auth;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
   if (userInfo) {
     if (!("roles" in userInfo) || (props.roles ?? []).every(role => userInfo.roles.includes(role))) {
       return props.children;
     } else {
-      return props.forbidden ?? "您无权访问此页面！";
+      return props.forbidden ?? "\u60A8\u65E0\u6743\u8BBF\u95EE\u6B64\u9875\u9762\uFF01";
     }
   } else {
-    return props.loading ?? "正在登录……";
+    return props.loading ?? "\u6B63\u5728\u767B\u5F55\u2026\u2026";
   }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsingroc/tsingroc-components",
-  "version": "5.0.0-alpha.18",
+  "version": "5.0.0-alpha.20",
   "author": "",
   "license": "ISC",
   "description": "",