ant Design Pro 登录状态管理

未登录自动跳转到登录页面，登录成功不跳转回登录页面的实现代码调用流程。

ant Design Pro 是一个企业中后台管理框架，开始做他，第一个肯定是要做登录，下面来看一下它是怎么登录的。

先看路由配置

Authorized.jsx代码：

import React from 'react';
import Redirect from 'umi/redirect';
import { connect } from 'dva';
import pathToRegexp from 'path-to-regexp';
import Authorized from '@/utils/Authorized';

const getRouteAuthority = (path, routeData) => {
  let authorities;
  routeData.forEach(route => {
    if (route.authority) {
      authorities = route.authority;
    } // match prefix

    if (pathToRegexp(`${route.path}(.*)`).test(path)) {
      // exact match
      if (route.path === path) {
        authorities = route.authority || authorities;
      } // get children authority recursively

      if (route.routes) {
        authorities = getRouteAuthority(path, route.routes) || authorities;
      }
    }
  });
  return authorities;
};

const AuthComponent = ({
  children,
  route = {
    routes: [],
  },
  location = {
    pathname: '',
  },
  user,
}) => {
  const { currentUser } = user;
  const { routes = [] } = route;
  const isLogin = currentUser && currentUser.name;
  return (
    <Authorized
      authority={getRouteAuthority(location.pathname, routes) || ''}
      noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to="/user/login" />}
    >
      {children}
    </Authorized>
  );
};

export default connect(({ user }) => ({
  user,
}))(AuthComponent);

Authorized 引用 util 里面的authority.js 的 getAuthority 方法，getAuthority 方法取登录的缓存并返回

 localStorage.getItem('antd-pro-authority')