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" />;
}
}