00001.react&umi 路由守卫

2022-10-24  本文已影响0人  笑着字太黑

我使用的是react-router 6.3.0
1.在.umirc.ts中的路由里添加wrappers,通过wrappers来实现路由守卫
@或者../的意思是从src目录开始查找文件,
./的意思是从src/pages目录开始查找文件

routes: [
    {
        name: ' Auth 测试',
        path: '/auth',
        component: './Auth',
        wrappers: [
          '@/wrappers/auth',
        ],
    },
  ],

2.src/wrappers/auth.tsx
Navigate:以前是用的Direct,现在已经不能用了
Outlet:以前用的是props.children,现在已经不能用了

import { Navigate } from 'react-router-dom'
import { Outlet } from 'umi';
export default (props: any) => {
  const isLogin = localStorage.getItem("token");
  console.log(`isLogin:${isLogin}`)
  if (isLogin) {
    console.log('auth:is login');
    console.log(`props.children:${props.children}`);
    // return <div>XXXXX{ props.children }</div>;
    return <Outlet />;
  } else {
    console.log('auth:is not login');
    localStorage.setItem('token', 'hastoken');
    return <Navigate to="/home" />;
  }
}
上一篇 下一篇

猜你喜欢

热点阅读