使用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

点这里|原文更详细