fe_service_ebtp_frontend/src/pages/401.tsx

import { logoutTokenApi } from '@/services/login';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import { getSessionRoleData } from '@/utils/session';
import { Button, Result, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import { history } from 'umi';

const messageMap = {
  401: '您的用户信息有误，请联系管理员',
  402: '您的用户角色信息缺失，请联系管理员',
  403: '您的用户角色信息异常，请重新登录',
  90401: '您的登录已超时，请重新登录',
  404: '系统错误，请联系管理员',
  405: '您的用户无权限访问'
};

const RequestTimeoutPage: React.FC<{}> = () => {
  const code: any = getURLInformation('code') == null ? '404' : getURLInformation('code');
  const { Text } = Typography;
  const [time, setTime] = useState<number>(10);
  const roleData = getSessionRoleData();
  // const token = sessionStorage.getItem('Authorization');

  useEffect(() => {
    let timeInteval: any
    if (code == 402 && isNotEmpty(roleData)) {
      timeInteval = setInterval(() => { // 倒计时
        setTime(n => {
          if (n == 1) {
            clearInterval(timeInteval)
            redirect();
          }
          return n - 1;
        })
      }, 1000);
    } else {
      clearInterval(timeInteval);
    }
    return () => {
      clearInterval(timeInteval);
    }
  }, []);

  const redirect = () => {
    if (isNotEmpty(roleData)) {
      history.replace({
        pathname: '/Dashboard',
      })
    }
  }
  const redirectLogin = () => {
    logoutTokenApi().then(res => {
      history.replace({
        pathname: '/userformal/login',
      })
    })
  }

  return (
    <Result
      title={messageMap[code]}
      extra={isNotEmpty(roleData) && code == 402 ? <Text type="secondary" strong>{time}秒后进入默认角色</Text> : code == 403 ? <Button type="primary" onClick={() => redirectLogin()}>重新登录</Button> : null}
    />
  );
};

export default RequestTimeoutPage;