umijs登录鉴权

项目中使用umijs，实现登录鉴权功能

需求描述

进入某一个页面，如果鉴权失败，则跳转到登录页面进行登录，登录成功，返回之前的页面

实现方式

umijs官方文档，在 .umirc.js 自定义路由的时候，添加wrapper，实现鉴权拦截
然而折腾很久，还是没实现，于是用自己的方法实现

实现分析

1. 首先写一个鉴权页面，鉴权成功加载页面，鉴权失败跳转登录页面，将这个页面包裹在项目的根组件外层

import React from 'react'
import PropTypes from 'prop-types'
import { Redirect } from 'dva/router'
import Cookies from 'js-cookie'
const propTypes = {
  children: PropTypes.array,
  route: PropTypes.object
}
const AuthRouter = (props) => {
  // 判断是否登录， 即是否有token
  const isLogin = !!Cookies.get('token')
  if (isLogin) {
    // 删除跳转登录之前的页面
    window.sessionStorage.removeItem('from_router')
    return (<div className="auth-router">{ props.children }</div>)
  } else {
    // 保存跳转登录之前的页面
    const hash = window.location.hash
    const fromRouter = hash ? hash.slice(1) : ''
    window.sessionStorage.setItem('from_router', fromRouter)
    // 跳转登录页面
    return (<Redirect to="/login" />)
  }
}
AuthRouter.propTypes = propTypes
export default AuthRouter

2. 登录页面，这个没啥说的，就是输入用户名密码，登录请求接口，返回token，配置好登录页面的路由

3. 登录成功后，返回登录之前的页面，这里只写出核心功能

import router from 'umi/router'
import Cookies from 'js-cookie'

// 获取登录之前的页面
const fromRouter = window.sessionStorage.getItem('from_router') || '/'
// 拿到接口返回的token和expire
const token = 'token'
const time = 'expire'
const expires = new Date(time)
// 设置cookie和expires
Cookies.set('token', token, { expires })
// 返回登录之前的页面
router.replace(fromRouter)