umi 路由拦截（简单粗暴）

粗暴）"/>

umi 路由拦截（简单粗暴）

一、业务场景：
最近在使用umi进行开发，其中在做导航路由渲染的时候遇到了一些坑，为了大家后面遇到和我一样的问题，给大家分享一下

二、解决方案：
先添加一个高阶组件，跟所有组件同级，再配置路由的地方添加配置 wrappers: [‘@/wrappers/auth’]，怕大家不理解，下面有图。

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

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

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

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

四、效果展示

今天的分享到此结束，欢迎小伙伴们一起交流