小程序-判断是否登录公用组件

大莲芒2025-03-26 13:08

javascript 复制代码

import type { FC, PropsWithChildren, ReactElement } from 'react';
import React, { useMemo } from 'react';
import Taro from '@tarojs/taro';

import useLoginState from '@/hooks/useLoginState';

interface WithSignInComponentProps extends PropsWithChildren {
  children: ReactElement;
  ignoreAuth?: boolean; // 是否强制忽略验证登录
  redirect?: string;
}

const WithSignInComponent: FC<WithSignInComponentProps> = ({
  children,
  ignoreAuth = false, // 是否强制忽略验证登录
  redirect // 跳转地址
}) => {
  const [, , action] = useLoginState();

  const eventRef = useMemo(() => children?.props?.onClick, [children?.props?.onClick]);

  const handleClick = async (e: Event) => {
    e.stopPropagation();
    try {
      const cookies = await action?.get();
      //本项目是存储的cookies，使用hooks----useLoginState能获取到
      const isLogin = !!(cookies && cookies?.length > 0);
      // 登陆判断
      if (ignoreAuth) {
        eventRef?.(e);
        return;
      }

      if (!isLogin) {
        await Taro.navigateTo({
          url: `登录的路由${
            redirect ? `?redirect=${encodeURIComponent(redirect)}` : ''
          }`
        });

        return;
      }
      eventRef?.(e);
    } catch {}
  };
  // @ts-ignore
  return React.cloneElement(children, { onClick: handleClick });
};

export default WithSignInComponent;

使用方式：

javascript 复制代码

//组件引用，放在了公共组件components下
import WithSignInComponent from '@/components/WithSignInComponent';
<WithSignInComponent>
	<div>测试登录</div>
</WithSignInComponent>