ChatAI/app/components/oauth/index.tsx

import { useEffect, useState } from "react";
import { getClientConfig } from "@/app/config/client";
import { useAccessStore } from "@/app/store";
import { api } from "@/app/client/api";
import dayjs from "dayjs";

export type ITokenData = {
  access_token: string;
  token_type: string;
  expires_in: number;
  scope?: string[];
};

/**
 * 使用oauth2登录站点
 */
export const EnsureToken = (props: any) => {
  const accessStore = useAccessStore();
  const [loading, setLoading] = useState(true);

  const config = getClientConfig();

  useEffect(() => {
    const parseToken = () => {
      const url = new URL(window.location.href);
      if (url.hash && url.hash.startsWith("#token=")) {
        try {
          setLoading(true);
          const token = JSON.parse(
            decodeURIComponent(url.hash.substring(7)),
          ) as ITokenData;
          accessStore.setAccessToken({
            accessToken: token.access_token,
            tokenType: token.token_type,
            expiresIn: dayjs().add(token.expires_in, "s").unix(),
          });
          setTimeout(() => {
            setLoading(false);
            url.hash = "";
            window.location.href = url.toString();
          }, 1000);
          return;
        } catch (e) {
          setLoading(false);
          console.log("parse token fail", e);
        }
      } else if (accessStore.hasAccessToken()) {
        api.user.userinfo().finally(() => {
          setLoading(false);
        });
      } else {
        accessStore.clearToken();
        setLoading(false);
      }
    };
    parseToken();
    const handler = setInterval(parseToken, 10000);
    return () => {
      clearInterval(handler);
    };
  }, []);

  if (loading) {
    return (
      <div>
        <span>Loading...</span>
      </div>
    );
  }
  if (!accessStore?.hasAccessToken()) {
    return (
      <div>
        <a href={config?.authorizeUrl ?? "/login"}>登录</a>
      </div>
    );
  }
  return <>{props.children}</>;
};