react 高效高质量搭建后台系统系列 —

其他章节请看：

react 高效高质量搭建后台系统系列

权限

本系列已近尾声，权限是后台系统必不可少的一部分，本篇首先分析spug项目中权限的实现，最后在将权限加入到我们的项目中来。

spug 中权限的分析

权限示例

比如我要将应用发布模块的查看权限分给某用户（例如 pjl），可以这样操作：

在角色管理中新建一角色（例如 demo），然后给该角色配置权限：
新建用户（pjl）并赋予其 demo 权限
pjl 登录后就只能看到自己有权限的页面和操作：

入口

上述示例中，以 pjl 登录成功后返回如下数据：

{

    "data": {

        "id": 2,

        "access_token": "74b0fe67d09646ee9ca44fc48c6b457a",

        "nickname": "pjl",

        "is_supper": false,

        "has_real_ip": true,

        "permissions": [

            "deploy.app.view",

            "deploy.repository.view"

        ]

    },

    "error": ""

}

其中 permissions 表示该用户的权限。

vscode 搜索 deploy.app.view 有两处：

发布配置（也是“应用管理”）页面入口 index.js。如果没有查看权限（deploy.app.view）就不展示该页面内容。

// spug\src\pages\deploy\app\index.js

export default observer(function () {

  return (

    <AuthDiv auth="deploy.app.view">

      <Breadcrumb>

        <Breadcrumb.Item>首页</Breadcrumb.Item>

        <Breadcrumb.Item>应用发布</Breadcrumb.Item>

        <Breadcrumb.Item>应用管理</Breadcrumb.Item>

      </Breadcrumb>

      <ComTable/>

    </AuthDiv>

  );

})

Tip：AuthDiv 用于控制页内组件的权限，里面通过 hasPermission 判断是否有对应的权限，如果没有，该组件内的子元素则不会显示。

export default function AuthDiv(props) {

  let disabled = props.disabled === undefined ? false : props.disabled;

  if (props.auth && !hasPermission(props.auth)) {

    disabled = true;

  }

  return disabled ? null : <div {...props}>{props.children}</div>

}

// 前端页面的权限判断(仅作为前端功能展示的控制，具体权限控制应在后端实现)

export function hasPermission(strCode) {

  const {isSuper, permissions} = Permission;

  if (!strCode || isSuper) return true;

  for (let or_item of strCode.split('|')) {

    if (isSubArray(permissions, or_item.split('&'))) {

      return true

    }

  }

  return false

}

routes.js。里面定义的就是菜单（详见左侧导航）。auth指授权，这里定义的是模块和页面的查看权限。其中deploy.app.view|deploy.repository.view|deploy.request.view表示只要有其中一个权限，“应用发布”就会展示。

// spug\src\routes.js

{

  icon: <FlagOutlined />, title: '应用发布', auth: 'deploy.app.view|deploy.repository.view|deploy.request.view', child: [

    { title: '应用管理', auth: 'deploy.app.view', path: '/deploy/app', component: DeployApp },

    { title: '构建仓库', auth: 'deploy.repository.view', path: '/deploy/repository', component: DeployRepository },

    { title: '发布申请', auth: 'deploy.request.view', path: '/deploy/request', component: DeployRequest },

  ]

},

页面级的权限

现在我们已经知道页面级的权限解决思路：

在定义菜单的地方（routes.js）通过 auth 定义查看（spug 中是 xx.xx.view）权限。如果没有 auth 则说明该页面任何人都可以访问
组装菜单时仅取出有权限的菜单页面

// spug\src\layout\Sider.js

function makeMenu(menu) {

  // 仅取出有权限的菜单

  if (menu.auth && !hasPermission(menu.auth)) return null;

  if (!menu.title) return null;

  return menu.child ? _makeSubMenu(menu) : _makeItem(menu)

}

如果直接通过 url 去访问没有权限的页面会如何：

直接 404。

为什么是 404？因为路由数组（Routes）中只取了有权限的菜单页面。

// spug\src\layout\index.js

<Switch>

  {/* 路由数组。里面每项类似这样：<Route exact key={route.path} path='/home' component={HomeComponent}/> */}

  {Routes}

  {/* 没有匹配则进入 NotFound */}

  <Route component={NotFound}/>

</Switch>

Routes 的内容请看路由初始化方法：

// 将 routes 中有权限的路由提取到 Routes 中

function initRoutes(Routes, routes) {

  for (let route of routes) {

    if (route.component) {

      // 如果不需要权限，或有权限则放入 Routes

      if (!route.auth || hasPermission(route.auth)) {

        Routes.push(<Route exact key={route.path} path={route.path} component={route.component}/>)

      }

    } else if (route.child) {

      initRoutes(Routes, route.child)

    }

  }

}

页内级权限

新增、删除等页内的权限如何实现的呢？我们把发布配置页内的新建权限放开，后端权限返回列表中将有： deploy.app.add

vscode 只搜索到一处匹配deploy.app.add。

<TableCard

      tKey="da"

      ...

      actions={[

        <AuthButton

          auth="deploy.app.add"

          type="primary"

          icon={<PlusOutlined/>}

          onClick={() => store.showForm()}>新建</AuthButton>

      ]}

其中 AuthButton 和上文的 AuthDiv 一样，如果有权限则显示其中内容

// spug\src\components\AuthButton.js

export default function AuthButton(props) {

  let disabled = props.disabled;

  if (props.auth && !hasPermission(props.auth)) {

    disabled = true;

  }

  return disabled ? null : <Button {...props}>{props.children}</Button>

}

于是我们知道页内级的权限解决思路：

在功能权限设置中定义对应操作权限的值，选中后把该值传递给后端

权限的值在 codes.js 中定义如下：

// codes.js

{

  key: 'deploy',

  label: '应用发布',

  pages: [

    {

      key: 'app',

      label: '应用管理',

      perms: [

        { key: 'view', label: '查看应用' },

        { key: 'add', label: '新建应用' },

        { key: 'edit', label: '编辑应用' },

        { key: 'del', label: '删除应用' },

        { key: 'config', label: '查看配置' },

      ]

    },

    {

      key: 'repository',

      label: '构建仓库',

      perms: [

        { key: 'view', label: '查看构建' },

        { key: 'add', label: '新建版本' },

      ]

    },

    ...

  ]

},

通过 AuthDiv、AuthButton等组件的 auth 匹配，如果没有权限则不展示该组件内容。

isSuper

登录后返回权限中还有个字段 is_supper。数据格式就像这样：

{

    "data": {

        "id": 1,

        "access_token": "6a0cef69a7d64b6f8c755ff341266e76",

        "nickname": "管理员",

        "is_supper": true,

        "has_real_ip": true,

        "permissions": [ ]

    },

    "error": ""

}

is_supper 是 true，permissions 为空数组。猜测 is_supper 的作用有2个：

一个用处（vscode 搜索 isSuper）直接返回有权限，无需其他判断。就像这样：

// 前端页面的权限判断(仅作为前端功能展示的控制，具体权限控制应在后端实现)

export function hasPermission(strCode) {

  const {isSuper, permissions} = Permission;

  if (!strCode || isSuper) return true;

  for (let or_item of strCode.split('|')) {

    if (isSubArray(permissions, or_item.split('&'))) {

      return true

    }

  }

  return false

}

一个用处（vscode 搜索 is_supper）是作为最大的权限再做一些页面上的操作。例如这里隐藏该片段：

<Form.Item hidden={store.record.is_supper} label="角色" style={{marginBottom: 0}}>

  <Form.Item name="role_ids" style={{display: 'inline-block', width: '80%'}} extra="权限最大化原则，组合多个角色权限。">

    <Select mode="multiple" placeholder="请选择">

      {roleStore.records.map(item => (

        <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>

      ))}

    </Select>

  </Form.Item>

  <Form.Item style={{display: 'inline-block', width: '20%', textAlign: 'right'}}>

    <Link to="/system/role">新建角色</Link>

  </Form.Item>

</Form.Item>

myspug 中权限的实现

需求

spug 中的权限整体思路：

通过一个配置页面（功能权限设置弹框）将某些权限（页面级和页内级）赋予某角色，再让某用户属于该角色
用户登录成功后返回数据（permissions、is_supper字段）告诉前端该用户的权限
前端在组装菜单和路由时只取有权限的，就这样解决了页面级的权限问题
再通过封装的 AuthDiv、AuthButton 等组件嵌套页内级权限，例如新建，如果没有权限则不显示

所以权限这里包含两条线：

一条是用户通过配置页面，将权限赋予某用户，保存在后端数据库
另一条是用户登录后，根据后端返回的权限显示有权限查看的页面和操作

需求：用户没有以下三个权限（报警联系人、报警联系组、角色管理中的新增）。见下图3个红框：

实现效果

最终效果如下：

代码实现

页面级权限配置

在 routes.js 中定义每个菜单（也是路由）的权限：

export default [

  // 无需权限

  { icon: <DesktopOutlined />, title: '工作台', path: '/home', component: HomeIndex },

  {

    icon: <AlertOutlined />, title: '报警中心', auth: 'alarm.alarm.view|alarm.contact.view|alarm.group.view', child: [

      { title: '报警历史', auth: 'alarm.alarm.view', path: '/alarm/alarm', component: AlarmCenter },

      { title: '报警联系人', auth: 'alarm.contact.view', path: '/alarm/contact', component: AlarmCenter },

      { title: '报警联系组', auth: 'alarm.group.view', path: '/alarm/group', component: AlarmCenter },

    ]

  },

  {

    icon: <AlertOutlined />, title: '系统管理', auth: "system.role.view", child: [

      { title: '角色管理', auth: 'system.role.view', path: '/system/role', component: SystemRole },

    ]

  },

  { path: '/welcome/info', component: WelcomeInfo },

]

Tip：例如角色管理页面需要system.role.view这个权限。命名任意，因为后端返回的权限是前端发送给的后端。

hasPermission

更新权限判断逻辑。之前统统返回 true：

// 之前

export function hasPermission(strCode) {

    return true

}

现在看后端是否返回该权限：

// 前端页面的权限判断(仅作为前端功能展示的控制，具体权限控制应在后端实现)

export function hasPermission(strCode) {

    const { isSuper, permissions } = Permission;

    if (!strCode || isSuper) return true;

    for (let or_item of strCode.split('|')) {

        if (isSubArray(permissions, or_item.split('&'))) {

            return true

        }

    }

    return false

}

//  数组包含关系判断

export function isSubArray(parent, child) {

    for (let item of child) {

        if (!parent.includes(item.trim())) {

            return false

        }

    }

    return true

}

页内级权限组件

定义两个组件（AuthButton、AuthDiv），并导出：

import React from 'react';

import { Button } from 'antd';

import { hasPermission } from '@/libs';

export default function AuthButton(props) {

  let disabled = props.disabled;

  if (props.auth && !hasPermission(props.auth)) {

    disabled = true;

  }

  return disabled ? null : <Button {...props}>{props.children}</Button>

}

import React from 'react';

import { hasPermission } from '@/libs';

export default function AuthDiv(props) {

    let disabled = props.disabled === undefined ? false : props.disabled;

    if (props.auth && !hasPermission(props.auth)) {

        disabled = true;

    }

    return disabled ? null : <div {...props}>{props.children}</div>

}

//  myspug\src\compoments\index.js

import NotFound from './NotFound';

import TableCard from './TableCard';

import AuthButton from './AuthButton'

import AuthDiv from './AuthDiv'

export {

    NotFound,

    TableCard,

    AuthButton,

    AuthDiv,

}

例如新建按钮就放入 AuthButton 组件中，而整个角色管理的入口模块就放入 AuthDiv 中。

组装

mock登录后的数据：

// mock/index.js

{

	"data": {

		"id": 2,

		"access_token": "74b0fe67d09646ee9ca44fc48c6b457a",

		"nickname": "pjl",

		"is_supper": false,

		"has_real_ip": true,

		"permissions": ["system.role.view", "alarm.alarm.view"]

	},

	"error": ""

}

角色管理入口页放入 AuthDiv：

// myspug\src\pages\system\role\index.js

export default function () {

  return (

    <AuthDiv auth="system.role.view">

      <ComTable />

    </AuthDiv>

  )

}

新增按钮放入 AuthButton：

// myspug\src\pages\system\role\Table.js

<TableCard

      rowKey="id"

      title="角色列表"

      actions={[

        <AuthButton type="primary" icon={<PlusOutlined/>} auth="system.role.add" >新增</AuthButton>

      ]}

扩展

spug 中权限的缺点

spug 中权限虽然简单，其中一个缺点是每开发一个新模块，就得更新权限配置页面（即功能权限设置）和路由（routes.js）配置：

如果将其改为可配置，将减小这部分的工作。

其他章节请看：

react 高效高质量搭建后台系统系列

巴特西

react 高效高质量搭建后台系统系列 —— 前端权限

权限

spug 中权限的分析

权限示例

入口

页面级的权限

页内级权限

isSuper

myspug 中权限的实现

需求

实现效果

代码实现

页面级权限配置

hasPermission

页内级权限组件

组装

扩展

spug 中权限的缺点

最新文章

热门文章

巴特西

react 高效高质量搭建后台系统 系列 —— 前端权限

权限

spug 中权限的分析

权限示例

入口

页面级的权限

页内级权限

isSuper

myspug 中权限的实现

需求

实现效果

代码实现

页面级权限配置

hasPermission

页内级权限组件

组装

扩展

spug 中权限的缺点

最新文章

热门文章

react 高效高质量搭建后台系统系列 —— 前端权限