Ant Design Pro开发后台管理系统(权限)-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Ant Design Pro开发后台管理系统(权限)

简介: 前言 权限是后台管理系统常见的需求,后台开发必须考虑设计的模块,antd-pro给我们提供了很好的关于权限的封装,我们只需要在配置菜单的时候配置上准入身份,在登录成功以后获取到登陆者身份以后更新登录人身份参数即可。

前言

权限是后台管理系统常见的需求,后台开发必须考虑设计的模块,antd-pro给我们提供了很好的关于权限的封装,我们只需要在配置菜单的时候配置上准入身份,在登录成功以后获取到登陆者身份以后更新登录人身份参数即可。
效果:
1、没有准入权限的菜单将不显示
2、直接在浏览器输入没有准入权限的的地址,将跳转到403页面(图1)


img_ceeb4d318b13b82e5564fd6c8b2b7ac3.png
图1.直接输入地址但却没有权限

个人demo关于权限简介

1、用邮箱自己注册账户(注册后可以登录但是没有任何权限)guest
2、联系管理员分配权限(分配后可以查看有权限的页面)
3、每次登录后获取最新的权限身份(如:admin,user,guest)

实战

Authorized组件是antd-pro的权限组件
Authorized 官方api

src/router.js中会发现如下代码

<AuthorizedRoute
            path="/"
            render={props => <BasicLayout {...props} />}
            authority={['admin', 'user', 'guest']}
            redirectPath="/user/login"
          />

其中authority对象就是准入身份的数组,表示只有这些身份的人可以登录,我们在配置的时候一定不要忘记在这更新我们新增的身份

然后就是menu.js,如下,展示了我们在配置菜单的时候怎么配身份

const menuData = [{
  name: '题库管理',
  path: 'question',
  icon: 'warning',
  authority: ['admin', 'user'],
  children: [{
    name: '题库列表',
    path: 'list',
  }, {
    name: '编辑题目',
    path: 'create-question',
    hideInMenu: true,
  }, {
    name: '科目管理'
  }]
}, {
  name: '账号管理',
  icon: 'warning',
  path: 'account',
  children: [{
    name: '账号列表',
    path: 'list',
    authority: 'admin',
  }, {
    name: '建设中',
    path: '',
    authority: ['admin', 'user'],
  }]
}]

然后就要说一下登录成功以后怎么获取权限了

effects:{
* login({payload}, {call, put}) {
      const response = yield call(login, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // 登录成功以后更新权限,跳转页面
      if (response && response.code === '0000') {
        reloadAuthorized();
        yield put(routerRedux.push('/'));
      }
    },
},
reducers: {
    changeLoginStatus(state, {payload}) {
      let _status = "ok";
      let _user = "admin";
      setToken("token");
      setAuthority(_user);//设置权限
      return {
        ...state,
        status: _status,
        type: 'account',
      };
    },
  }

我们看看setAuthority、reloadAuthorized这两个方法都做了什么事儿

//设置身份
export function setAuthority(authority) {
  return localStorage.setItem('antd-pro-authority', authority);
}
//获取身份
export function getAuthority() {
  return localStorage.getItem('antd-pro-authority');
}

如此而且,只是把新的身份值存在localStorage里边,注意getAuthority,下边会用到

import RenderAuthorized from '../components/Authorized';
import { getAuthority } from './authority';
let Authorized = RenderAuthorized(getAuthority());
const reloadAuthorized = () => {
  Authorized = RenderAuthorized(getAuthority());
};
export { reloadAuthorized };
export default Authorized;

RenderAuthorized: (currentAuthority: string | () => string) => Authorized
权限组件默认 export RenderAuthorized 函数,它接收当前权限作为参数,返回一个权限对象,该对象提供以下几种使用方式。

Authorized

最基础的权限控制。

参数 说明 类型 默认值
children 正常渲染的元素,权限判断通过时展示 ReactNode -
authority 准入权限/权限判断 `string array Promise (currentAuthority) => boolean` -
noMatch 权限异常渲染元素,权限判断不通过时展示 ReactNode -

Authorized.AuthorizedRoute

参数 说明 类型 默认值
authority 准入权限/权限判断 `string array Promise (currentAuthority) => boolean` -
redirectPath 权限异常时重定向的页面路由 string -

其余参数与 Route 相同。

Authorized.Secured

注解方式,@Authorized.Secured(authority, error)

参数 说明 类型 默认值
authority 准入权限/权限判断 `string Promise (currentAuthority) => boolean` -
error 权限异常时渲染元素 ReactNode <Exception type="403" />

Authorized.check

函数形式的 Authorized,用于某些不能被 HOC 包裹的组件。 Authorized.check(authority, target, Exception)
注意:传入一个 Promise 时,无论正确还是错误返回的都是一个 ReactClass。

参数 说明 类型 默认值
authority 准入权限/权限判断 `string Promise (currentAuthority) => boolean` -
target 权限判断通过时渲染的元素 ReactNode -
Exception 权限异常时渲染元素 ReactNode -

附上管理员分配权限页面

img_a1afdde0e837491d9e0e381794fadf6c.png
分配权限

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章