美文网首页
00001.react&umi 路由守卫

00001.react&umi 路由守卫

作者: 笑着字太黑 | 来源:发表于2022-10-24 17:22 被阅读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" />;
  }
}

相关文章

  • 00001.react&umi 路由守卫

    我使用的是react-router 6.3.01.在.umirc.ts中的路由里添加wrappers,通过wrap...

  • vue的路由守卫

    路由守卫分3种:全局守卫路由独享守卫组件内的路由守卫 1.全局守卫:beforeEachbeforeResolve...

  • 路由守卫

    路由守卫分为三种 全局守卫: 路由独享守卫卸载route里 组件内守卫:写在组件配置对象里

  • [VUE]动态的更新页面的Title

    首先可以用路由守卫 + VueRouter来实现路由守卫相关文档1.main.js里加入路由守卫 // 页面修改时...

  • vue学习笔记(八)导航守卫(全局守卫,路由独享,组件内守卫)

    导航守卫-全局守卫 导航守卫-路由独享 导航守卫-组件内守卫

  • vue-路由导航守卫&异步组件

    导航守卫包括全局导航守卫、路由守卫、组件局部守卫 全局导航守卫 在全局导航守卫中,每次路由的跳转他们三个都会被触发...

  • Vue嵌套路由和路由守卫

    嵌套路由 路由守卫

  • vue路由守卫

    概念 路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化 路由守卫,主要就是用来通过跳转或取消的方式守卫导...

  • vue学习(52)vue-router(4)

    路由守卫作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫(我们可以在meta中配置一些信息) ...

  • 路由

    全局守卫就是每一个路径进来都会经过这个全局守卫的处理 单路由守卫就是把守卫指定给某一个路由 组件内路由就是把守卫放...

网友评论

      本文标题:00001.react&umi 路由守卫

      本文链接:https://www.haomeiwen.com/subject/eyhozrtx.html