umi实现路由鉴权

什么是路由鉴权？

路由鉴权：简单来说就是未登录不能够访问内容的页面。

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" },
      ]
    },
  ],