跳至主要內容

react-router-鉴权页面闪现

程序员王天大约 1 分钟

问题

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

解决

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

示例代码

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

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>
);

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com