React纯前端模拟实现登录鉴权

import { useState, useEffect } from 'react';

const useIntervalWhenStarted = () => {
  useEffect(() => {
    let timer = null;

    timer = setInterval(() => {
      window.localStorage.setItem('isLogin', (+new Date()).toString());
    }, 5 * 1000);

    return () => {
      if (timer) {
        clearInterval(timer);
      }
    };
  }, []);

  return [];
};

export { useIntervalWhenStarted };

import { useIntervalWhenStarted } from "@/hooks";

// ... 页面组件代码 ...

useIntervalWhenStarted();

// ... 页面组件其余代码 ...

import React from 'react';
import store from 'store';
import { ConfigProvider } from 'antd';
import { Outlet } from '@umijs/max';
import { checkIfLogin } from "@/utils/utils";
import Intl from 'react-intl-universal';
import intlzhCN from '@/locales/zh-CN';
import intlenUS from '@/locales/en-US';
import "./index.less";

const locale = {
  'zh-CN': require('antd/lib/locale/zh_CN'),
  'en-US': require('antd/lib/locale/en_US'),
};

const BasicLayout: React.FC<any> = (props) => {
  const { children } = props;
  console.log(props);
  const lang = store.get('umi_locale') || 'zh-CN';
  Intl.init({
    currentLocale: lang,
    locales: {
      'zh-CN': intlzhCN,
      'en-US': intlenUS,
    },
  });

  checkIfLogin();

  return (
    <ConfigProvider componentSize="small" locale={locale[lang].default}>
      {children}
      <Outlet />
    </ConfigProvider>
  );
};

export default BasicLayout;

/**
 * 检查登录状态，如果没有登录则强制到登录页
 */
export const checkIfLogin = () => {
  const gap = 30 * 60 * 1000;
  const login = window.localStorage.getItem('isLogin');

  const location = useLocation();
  const { pathname } = location;
  if(['/Login','/login'].includes(pathname)) return;
  if(!login) {
    history.push({
      pathname: '/Login',
    })
  } else {
    const timeStamp = parseInt(login);
    const current = +new Date();
    if (current-timeStamp>gap) {
      window.localStorage.removeItem('isLogin');
      history.push({
        pathname: '/Login',
      })
    }
  }
}