粗暴)"/>
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’],需要拦截的都必须添加,如图
四、效果展示
今天的分享到此结束,欢迎小伙伴们一起交流
更多推荐
umi 路由拦截(简单粗暴)
发布评论