ant Design Pro 登录状态管理

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

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

先看路由配置

ant Design Pro 登录状态管理_第1张图片

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 (
     : }
    >
      {children}
    
  );
};

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

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

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

ant Design Pro 登录状态管理_第2张图片

你可能感兴趣的:(Web前端,react,登录,ant,Design,Pro,登录)