Authorized权限组件

首先是使用权限组件定义有权限组件的渲染方式，直接上代码：

import react from ‘react';

/** 导出对象别名为 RenderAuthorized */

import RenderAuthorized from ‘@/components/Authorized';

import { getAuthority } from ‘@/utils/authority';

import Redirect from ‘umi/redirect';

// 获取当前用户登录权限

const Authority = getAuthority();

// 以当前用户权限执行对所请求资源的相关权限过滤并决定放行或跳出（触发本程序，意味着路由配置了权限过滤，

// 其中准入权限（eg.authority: [‘admin', ‘user']）将作为比对当前权限的依据）

const Authorized = RenderAuthorized(Authority);

/**

* 这个组件用来比对权限，配置在顶级目录/下，访问根路径时触发

* children，是指path：'/'对应的路由，这里面配置的子元素都是以props的形式附加到children实例，其中children.props.route是指所有子路由

* { children, authority, noMatch = null }是Authorized组件需要的参数，这里将通过props的形式给组件传值！

* 通过props给组件传值，意味着调用组件时组件需要的参数默认从props取

*/

export default ({ children }) => (

{children}

);

 

对应的路由配置：

// app，访问根路径时将触发权限组件，根据登录信息，验证通过则放行，否则重定向到登录页

{

path: ‘/',

component: ‘../layouts/BasicLayout',

Routes: [‘src/pages/Authorized'],

authority: [‘admin', ‘user'],

routes: [

// dashboard

{ path: ‘/', redirect: ‘/dashboard/analysis' },

{

path: ‘/dashboard',

name: ‘dashboard',

icon: ‘dashboard',

routes: [

{

path: ‘/dashboard/analysis',

name: ‘analysis',

component: ‘./Dashboard/Analysis',

},

…….

…….

 

Authorized组件的源码：

import CheckPermissions from ‘./CheckPermissions';

/**

* 权限组件，调用时绑定props，其中children以react子标签的形式赋予、其他以props形式赋予

* @param {* 路由及其设置的准入权限，鉴权通过放行的路径，权限比对不上跳转的资源} param0

*/

const Authorized = ({ children, authority, noMatch = null }) => {

const childrenRender = typeof children === ‘undefined' ? null : children;

// 权限比对实际进行的操作

return CheckPermissions(authority, childrenRender, noMatch);

};

/** 权限组件 */

export default Authorized;

 

检查权限的实现：

import react from ‘react';

import PromiseRender from ‘./PromiseRender';

import { CURRENT } from ‘./renderAuthorize';

function isPromise(obj) {

return (

!!obj &&

(typeof obj === ‘object' || typeof obj === ‘function') &&

typeof obj.then === ‘function'

);

}

/**

* 通用权限检查方法

* 权限都应该在后端维护，前端只进行简单身份区分（比如guest、user、admin）

* 权限检查其实是权限比对，路由或菜单设定的权限参数与访问者具备的权限参数的比对，比较通过则返回请求的资源，否则返回设定的资源（比如登录页面）

* 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) => {

console.log(‘target=====', target);

// 没有判定权限.默认查看所有

// Retirement authority, return target;

if (!authority) {

return target;

}

/**

* 下面分几种情况处理，主要是权限对象类型不同，处理不同

*/

// 1.数组处理，路由配置中设置的准入权限为authority: [‘admin', ‘user'],

if (Array.isArray(authority)) {

if (authority.indexOf(currentAuthority) >= 0) {

return target;

}

if (Array.isArray(currentAuthority)) {

const element = currentAuthority[i];

if (authority.indexOf(element) >= 0) {

return target;

}

}

}

return Exception;

}

// 2.string 处理

if (typeof authority === ‘string') {

if (authority === currentAuthority) {

return target;

}

if (Array.isArray(currentAuthority)) {

const element = currentAuthority[i];

if (authority === element) {

return target;

}

}

}

return Exception;

}

// 3.Promise 处理

if (isPromise(authority)) {

}

// 4.Function 处理

if (typeof authority === ‘function') {

try {

const bool = authority(currentAuthority);

// 函数执行后返回值是 Promise

if (isPromise(bool)) {

}

if (bool) {

return target;

}

return Exception;

} catch (error) {

throw error;

}

}

throw new Error(‘unsupported parameters');

};

export { checkPermissions };

// current为当前权限，一般在内部封装

/**

* 导出一个函数版鉴权接口

* @param {*} authority

* @param {*} target

* @param {*} Exception

*/

const check = (authority, target, Exception) =>

checkPermissions(authority, CURRENT, target, Exception);

export default check;

声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明：转自《Authorized权限组件》
本文地址：https://www.zhiletu.com/archives-9699.html
关注公众号：

赞赏

微信赞赏支付宝赞赏