umi 路由拦截

具体实现步骤

1、在src的目录下，和page同级，新建一个wrappers文件夹（这个名称是固定的），在文件夹下新建 Auth.tsx文件

 

2、在Auth.tsx文件里面的写入以下内容：

import { Redirect } from 'umi'

export default function Auth(props: any) {
  //获取本地缓存 localStorage的值
  const isLogin = sessionStorage.getItem("token")
  //如果这个值存在就返回正常内容
  if (isLogin) {
    return (
      <div>
        {props.children}
      </div>
    )
  } else {
    //如果这个值存在就重定向到登录页
    console.log('跳登录')
    return (<Redirect to='/login' />)
  }
}

3、 在配置路由的地方加上 wrappers: [‘@/wrappers/auth’]，需要拦截的都必须添加