react-router-鉴权页面闪现

程序员王天

发布于 2023-10-18 19:35:54

2940

发布于 2023-10-18 19:35:54

文章被收录于专栏：王天的进阶之路王天的进阶之路

# 问题

在用户未登录时、打开某个需要鉴权的页面，会出现短暂的目标页面闪现，然后跳转到登录页。这是因为在页面加载时，会先展示目标页面的内容，然后在进行鉴权检查后才进行跳转的过程导致的。

# 解决

使用鉴权路由组件：创建一个高阶组件或自定义组件，用于对需要鉴权的路由进行包裹。在该组件中进行鉴权检查，如果用户未登录，则直接跳转到登录页，否则渲染目标页面。这样可以避免目标页面的内容闪现

# 示例代码

# 封装一个路由守卫高阶组件

import { Navigate, useLocation } from "react-router-dom";
import { serachRoutr } from "../utils/utils";
import { ListRoute } from "../router/routerConfig";

const AuthRouer = (PROPS: any) => {
  const isLogin = localStorage.getItem("isLogin");
  // const navigate = useNavigate();

  const { pathname } = useLocation();
  const res = serachRoutr(pathname, ListRoute) as any;
  // 完成二级路由重定向
  if (res.meta && res.meta.to) {
    return <Navigate to="/home/main" replace></Navigate>;
  }
  if (!isLogin && pathname !== "/login") {
    console.log("loaclhost", pathname);
    // 未登录且不是登录页，跳转到登录页
    return <Navigate to="/login" replace />;
  } else {
    return <div>{PROPS.children}</div>;
  }
};

export default AuthRouer;

使用：注意！用封装的路由守卫组件包裹住路由信息

import ReactDOM from 'react-dom/clien;
import './index.css';
import RouterChiled from './router/routerConfig';
import {  BrowserRouter } from 'react-router-dom';
import AuthRouer from './components/authRouer';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(

  <BrowserRouter>
    {/* <Suspense fallback={<div>加载中</div>}> */}
    // 用路由守卫组件包裹住路由信息
    <AuthRouer>
      <RouterChiled />
    </AuthRouer>
    {/* </Suspense> */}
  </BrowserRouter>
);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react