基于React的简单权限设计

前端进行权限控制只是为了用户体验，对应的角色渲染对应的视图，真正的安全保障在后端。

前言

毕业之初，工做的主要内容即是开发一个后台管理系统，当时存在的一个现象是：

用户若记住了某个 url，直接浏览器输入，不论该用户是否拥有访问该页面的权限，均能进入页面。

若页面初始化时（componentDidMount）进行接口请求，后端会返回 403 的 HTTP 状态码，同时前端封装的request.js会对非业务异常进行相关处理，碰见 403，就重定向到无权限页面。

如果页面初始化时不存在先后端交互，那就要等用户触发某些操做（好比表单提交）后才会触发上述流程。

能够看到，安全保障是后端兜底的，那前端能作些什么呢？

1. 明确告知用户没有权限，避免用户误觉得本身拥有该权限而进行操做（即便没法操做成功），直接跳转至无权限页面；
2. 拦截明确无权的请求，好比某些须要权限才能进行的操做入口（按钮 or 导航等）不对无权用户展现，其实本点包含上一点。

最近也在看Ant Design Pro的权限相关处理，有必要进行一次总结。

须要注意的是，本文虽然基于Ant Design Pro的权限设计思路，但并非彻底对其源码的解读（可能更偏向于 v1 的涉及思路，不涉及 umi）。

若是有错误以及理解误差请轻捶并指正，谢谢。

模块级别的权限处理

假设存在如下关系：

角色 role	权限枚举值 authority	逻辑
普通用户	user	不展现
管理员	admin	展现“进入管理后台”按钮

某页面上存在一个文案为“进入管理后台”的按钮，只对管理员展现，让咱们实现一下。

简单实现

// currentAuthority 为当前用户权限枚举值

const AdminBtn = ({ currentAuthority }) => {
  if ('admin' === currentAuthority) {
    return <button>进入管理后台</button>;
  }
  return null;
};
复制代码

好吧，简单至极。

权限控制就是if else，实现功能并不复杂，大不了每一个页面|模块|按钮涉及到的处理都写一遍判断就是了，总能实现需求的。

不过，如今只是一个页面中的一个按钮而已，咱们还会碰到许多“某（几）个页面存在某个 xxx，只对 xxx（或/以及 xxx） 展现”的场景。

因此，还能作的更好一些。

下面来封装一个最基本的权限管理组件Authorized。

组件封装-Authorized

指望调用形式以下：

<Authorized currentAuthority={currentAuthority} authority={'admin'} noMatch={null}>
  <button>进入管理后台</button>
</Authorized>
复制代码

api 以下：

参数	说明	类型	默认值
children	正常渲染的元素，权限判断经过时展现		ReactNode
currentAuthority	当前权限	string
authority	准入权限	string/string[]
noMatch	未经过权限判断时展现	ReactNode

currentAuthority这个属性没有必要每次调用都手动传递一遍，此处假设用户信息是经过 redux 获取并存放在全局 store 中。

注意：咱们固然也能够将用户信息挂在 window 下或者 localStorage 中，但很重要的一点是，绝大部分场景咱们都是经过接口异步获取的数据，这点相当重要。若是是 html 托管在后端或是 ssr的状况下，服务端直接注入了用户信息，那真是再好不过了。

新建src/components/Authorized/Authorized.jsx实现以下：

import { connect } from 'react-redux';

function Authorized(props) {
  const { children, userInfo, authority, noMatch } = props;
  const { currentAuthority } = userInfo || {};
  if (!authority) return children;
  const _authority = Array.isArray(authority) ? authority : [authority];
  if (_authority.includes(currentAuthority)) return children;
  return noMatch;
}

export default connect(store => ({ userInfo: store.common.userInfo }))(Authorized);
复制代码

如今咱们无需手动传递currentAuthority：

<Authorized authority={'admin'} noMatch={null}>
  <button>进入管理后台</button>
</Authorized>
复制代码

✨ 很好，咱们如今迈出了第一步。

在Ant Design Pro中，对于currentAuthority（当前权限）与authority（准入权限）的匹配功能，定义了一个checkPermissions方法，提供了各类形式的匹配，本文只讨论authority为数组（多个准入权限）或字符串（单个准入权限），currentAuthority为字符串（当前角色只有一种权限）的状况。

页面级别的权限处理

页面就是放在Route组件下的模块。

知道这一点后，咱们很轻松的能够写出以下代码：

新建src/router/index.jsx，当用户角色与路由不匹配时，渲染Redirect组件用于重定向。

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import NormalPage from '@/views/NormalPage'; /* 公开页面 */
import UserPage from '@/views/UserPage'; /* 普通用户和管理员都可访问的页面*/
import AdminPage from '@/views/AdminPage'; /* 管理员才可访问的页面*/
import Authorized from '@/components/Authorized';

// Layout就是一个布局组件，写一些公用头部底部啥的

function Router() {
  return (
    <BrowserRouter>
      <Layout>
        <Switch>
          <Route exact path='/' component={NormalPage} />

          <Authorized
            authority={['admin', 'user']}
            noMatch={
              <Route path='/user-page' render={() => <Redirect to={{ pathname: '/login' }} />} />
            }
          >
            <Route path='/user-page' component={UserPage} />
          </Authorized>

          <Authorized
            authority={'admin'}
            noMatch={
              <Route path='/admin-page' render={() => <Redirect to={{ pathname: '/403' }} />} />
            }
          >
            <Route path='/admin-page' component={AdminPage} />
          </Authorized>
        </Switch>
      </Layout>
    </BrowserRouter>
  );
}

export default Router;
复制代码

这段代码是不 work 的，由于当前权限信息是经过接口异步获取的，此时Authorized组件获取不到当前权限（currentAuthority），假若直接经过 url 访问/user-page或/admin-page，不论用户身份是否符合，请求结果未回来，都会被重定向到/login或/403，这个问题后面再谈。

先优化一下咱们的代码。

抽离路由配置

路由配置相关 jsx 内容太多了，页面数量过多就很差维护了，可读性也大大下降，咱们能够将路由配置抽离出来。

新建src/router/router.config.js，专门用于存放路由相关配置信息。

import NormalPage from '@/views/NormalPage';
import UserPage from '@/views/UserPage';
import AdminPage from '@/views/AdminPage';

export default [
  {
    exact: true,
    path: '/',
    component: NormalPage,
  },
  {
    path: '/user-page',
    component: UserPage,
    authority: ['user', 'admin'],
    redirectPath: '/login',
  },
  {
    path: '/admin-page',
    component: AdminPage,
    authority: ['admin'],
    redirectPath: '/403',
  },
];
复制代码

组件封装-AuthorizedRoute

接下来基于Authorized组件对Route组件进行二次封装。

新建src/components/Authorized/AuthorizedRoute.jsx。

实现以下：

import React from 'react';
import { Route } from 'react-router-dom';
import Authorized from './Authorized';

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

export default AuthorizedRoute;
复制代码

优化后

如今重写咱们的 Router 组件。

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import AuthorizedRoute from '@/components/AuthorizedRoute';
import routeConfig from './router.config.js';

function Router() {
  return (
    <BrowserRouter> <Layout> <Switch> {routeConfig.map(rc => { const { path, component, authority, redirectPath, ...rest } = rc; return ( <AuthorizedRoute key={path} path={path} component={component} authority={authority} redirectPath={redirectPath} {...rest} /> ); })} </Switch> </Layout> </BrowserRouter> ); } export default Router; 复制代码

心情舒畅了许多。

但是还留着一个问题呢——因为用户权限信息是异步获取的，在权限信息数据返回以前，AuthorizedRoute组件就将用户推到了redirectPath。

其实Ant Design Pro v4 版本就有存在这个问题，相较于 v2 的@/pages/Authorized组件从localStorage中获取权限信息，v4 改成从 redux 中获取（redux 中的数据则是经过接口获取），和本文比较相似。具体可见这次 PR。

异步获取权限

解决思路很简单：保证相关权限组件挂载时，redux 中已经存在用户权限信息。换句话说，接口数据返回后，再进行相关渲染。

咱们能够在 Layout 中进行用户信息的获取，数据获取完毕后渲染children。

结语

Ant Design Pro从 v2 开始底层基于 umi实现，经过路由配置的 Routes 属性，结合@/pages/Authorized组件（该组件基于@/utils/Authorized组件——@/components/Authorized的二次封装，注入currentAuthority（当前权限））实现主要流程。 同时，权限信息存放于localStorage，经过@/utils/authority.js提供的工具方法进行权限 get 以及 set。

仔细看了下@/components/Authorized文件下的内容，发现还提供了AuthorizedRoute组件，可是并未在代码中使用（取而代之的是@/pages/Authorized组件），翻了 issue 才了解到，v1 没有基于umi的时候，是基于AuthorizedRoute进行路由权限管理的，升级了以后，AuthorizedRoute则并无用于路由权限管理。

涉及到的相关文件比较多（components/pages/utils），v4 的文档又有些缺失，看源码的话，若没有理清版本之间差别，着实会有些费力。

本文在权限信息获取上，经过接口异步获取，存放至 redux（和 v4 版本有些相似，见@/pages/Authorized以及@/layouts/SecurityLayout）。