ant design pro 代码学习(一) ----- 路由分析

1、一级路由

 const routerData = getRouterData(app);
  const UserLayout = routerData['/user'].component;
  const BasicLayout = routerData['/'].component;
  return (
    <LocaleProvider locale={zhCN}>
      <ConnectedRouter history={history}>
        <Switch>
          <Route path="/user" component={UserLayout} />
          <AuthorizedRoute
            path="/"
            render={props => <BasicLayout {...props} />}
            authority={['admin', 'user']}
            redirectPath="/user/login"
          />
        </Switch>
      </ConnectedRouter>
    </LocaleProvider>
  );

  整个项目的路由分两部分:一部分是user相关的,一部分是业务相关的

  • 含有/user的路由 — 对应的路由组件时UserLayout
  • 排除/user外的路由 — 对应的路由组件时BasicLayout

2、二级路由

  • UserLayout
      UserLayout中设置了二级路由,其中match.path对应为props属性中的match.path,此处即为/user,routerData为所有的路由数据,详见(src/common/router.js),getRoutes(match.path, routerData)方法获取所有的user相关的路由配置,并生成对应的路由组件。同时Redirect组件设置了默认的路由。
<Switch>
  {getRoutes(match.path, routerData).map(item => (
    <Route
      key={item.key}
      path={item.path}
      component={item.component}
      exact={item.exact}
    />
  ))}
  <Redirect exact from="/user" to="/user/login" />
</Switch>
  • BasicLayout
      所有相关的路由信息,都包含有侧边栏、顶部菜单、内部部分、底部等布局,即SiderMenu、Header、Content、Footer。路由的布局则部署在content组件中,同UserLayout,通过getRoutes获取相关路由的信息,并生成队友路由组件route。
<Layout>
        <SiderMenu/>
        <Layout>
          <Header>
            <GlobalHeader/>
          </Header>
          <Header>
           <Content>
            <Switch>
              {redirectData.map(item => (
                <Redirect key={item.from} exact from={item.from} to={item.to} />
              ))}
              {getRoutes(match.path, routerData).map(item => (
                <AuthorizedRoute
                  key={item.key}
                  path={item.path}
                  component={item.component}
                  exact={item.exact}
                  authority={item.authority}
                  redirectPath="/exception/403"
                />
              ))}
              <Redirect exact from="/" to={bashRedirect} />
              <Route render={NotFound} />
            </Switch>
          </Content>
          <Footer>
            <GlobalFooter/>
          </Footer>
        </Layout>
      </Layout>

  当前路由集合中第一个通过认证的路由被设置为默认的路由,即Redirect的指向


3、路由认证 AuthorizedRoute

   BasicLayout中路由都是循环生成AuthorizedRoute组件完成,包括我们的一级路由也是通过AuthorizedRoute组件封装的,那么AuthorizedRoute到底是干嘛的?

//BasicLayout.js
import Authorized from '../utils/Authorized';
const { AuthorizedRoute, check } = Authorized;

   由以上代码可知,AuthorizedRoute是Authorized组件的一个属性。在../utils/Authorized.js中我们可以找到如下代码。其中getAuthority()获取用户存放在localStorage的权限记录。Authorized是由RenderAuthorized(getAuthority())生成。

//../utils/Authorized.js
import RenderAuthorized from '../components/Authorized';
import { getAuthority } from './authority';
let Authorized = RenderAuthorized(getAuthority()); // eslint-disable-line

  继续跟踪上述代码,可以看到../components/Authorized中有两个export:1、当前权限值,通过renderAuthorize方法传入当前权限值计算(对应let Authorized = RenderAuthorized(getAuthority()));2、Authorized组件,有三部分组成,其中有我们的
AuthorizedRoute组件。

//../components/Authorized
import AuthorizedRoute from './AuthorizedRoute';
....
Authorized.Secured = Secured;
Authorized.AuthorizedRoute = AuthorizedRoute;
Authorized.check = check;


....


const renderAuthorize = currentAuthority => {
  if (currentAuthority) {
    if (currentAuthority.constructor.name === 'Function') {
      CURRENT = currentAuthority();
    }
    if (currentAuthority.constructor.name === 'String') {
      CURRENT = currentAuthority;
    }
  } else {
    CURRENT = 'NULL';
  }
  return Authorized;
};


export { CURRENT };
export default renderAuthorize;

  通过一些类引用,终于看到了最终的AuthorizedRoute。

//AuthorizedRoute.js
....
return (
      <Authorized
        authority={authority}
        noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
      >
        <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
      </Authorized>
    );

在AuthorizedRoute组件中又包含Authorized组件封装。Authorized是一个高阶组件,通过调用CheckPermissions方法返回一个新的组件。具体的Authorized代码如下:

import CheckPermissions from './CheckPermissions';


render() {
    const { children, authority, noMatch = null } = this.props;
    const childrenRender = typeof children === 'undefined' ? null : children;
    return CheckPermissions(authority, childrenRender, noMatch);
 }

  CheckPermissions组件(返回有check,引用时被重命名为 CheckPermissions),其中CURRENT即为之前通过RenderAuthorized(getAuthority())时,计算的当前权限。checkPermissions方法,会判定CURRENT是否在authority权限范围内,如果有权限则返回target,否则返回Exception

import { CURRENT } from './index';
...


/**
 * 通用权限检查方法
 * Common check permissions method
 * @param { 权限判定 Permission judgment type string |array | Promise | Function } authority
 * @param { 你的权限 Your permission description  type:string} currentAuthority
 * @param { 通过的组件 Passing components } target
 * @param { 未通过的组件 no pass components } Exception
 */
const checkPermissions = (authority, currentAuthority, target, Exception) => {
    ...
})


...


const check = (authority, target, Exception) => {
  return checkPermissions(authority, CURRENT, target, Exception);
};


export default check;

  至此可知。结合路由生成是调用AuthorizedRoute组件封装和AuthorizedRoute组件的功能

  • 路由生成:
<Switch>
  {redirectData.map(item => (
    <Redirect key={item.from} exact from={item.from} to={item.to} />
  ))}
  {getRoutes(match.path, routerData).map(item => (
    <AuthorizedRoute
      key={item.key}
      path={item.path}
      component={item.component}
      exact={item.exact}
      authority={item.authority}
      redirectPath="/exception/403"
    />
  ))}
  <Redirect exact from="/" to={bashRedirect} />
  <Route render={NotFound} />
</Switch>
  • AuthorizedRoute
<Authorized
    authority={authority}
    noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
  >
    <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
  </Authorized>

  当 authority={item.authority}权限通过的时候,及生成路由组件Route,该路由对应的组件为component={item.component};当权限不通过时,即加载nomatch生成的组件Route,此时重定向到redirectPath=”/exception/403”。

4、流程图

ant design Pro 路由流程图

下一篇 :ant design pro 代码学习(二) —– 路由数据分析

ant design pro 代码学习持续进行中,欢迎大家共同探讨。。。。。。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zcs425171513/article/details/80681110
文章标签: dva ant design pro ract
个人分类: dva react ant design pro
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭