目录标题
什么是路由鉴权?
路由鉴权:简单来说就是未登录不能够访问内容的页面。
1. 在src目录下创建 src/wrappers/auth。
代码如下:
import React from 'react';
// const { Redirect } = require('dva').router;
import {Redirect} from 'umi'
const AuthRouter = (props: any) => {
// 这个根据自己判断是否登录
const isLogin = window.localStorage.getItem('fxhlogin') ? true : false;
return (
isLogin ? <div>{props.children}</div> : <Redirect to="/" />
)
}
export default AuthRouter
此处fxhlogin是自己设置的token名称 ,Redirect是重定向到登录。
2. 在src目录下创建一个login文件夹和home文件夹
login是登录需要的内容,home是内部页面,未登录不能够访问。
3. 最后在.umirc.ts中使用wrappers: [‘@/wrappers/auth’]
代码如下:
routes: [
// 登录
{ path: "/", component: "@/pages/login/index" },
{
path: "/", component: "@/layouts/index", wrappers: ['@/wrappers/auth',],
routes: [
{ path: "/shop", component: "@/pages/shop/index" },
{ path: "/book", component: "@/pages/book/index" },
]
},
],