003-pro ant design 前端权限处理-支持URL参数的页面
前天需要增加MD5引用
https://www.bootcdn.cn/blueimp-md5/
1、修改权限文件（CheckPermissions.js）使用自定义权限
2、配置异常页面
2.1、创建异常页面
/src/pages/Exception
import React from 'react';
import { formatMessage } from 'umi/locale';
import Link from 'umi/link';
import Exception from '@/components/Exception';
const Exception400 = () => (
<Exception
type="400"
desc={formatMessage({ id: 'app.exception.description.400' })}
linkElement={Link}
backText={formatMessage({ id: 'app.exception.back' })}
/>
);
export default Exception400;
2.2、增加400页面配置项
/src/components/Exception/typeConfig.js
const config = {
400: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
title: '400',
desc: '抱歉，你无权访问该页面或该页面不存在',
},
//......
}
2.3、添加中英文菜单对照
/src/locales/zh-CN.js
'app.exception.description.400': '抱歉，你无权限访问该页面或该页面不存在',
2.4、将400页面引入（BasicLayout.js）
/src/layouts/BasicLayout.js
import Exception400 from '../pages/Exception/400';
3、权限菜单控制开发
3.1、获取远端服务器授权菜单
/src/layouts/BasicLayout.js
state中增加menuPermissionData参数
state = { rendering: true, isMobile: false, menuData: this.getMenuData(), menuPermissionData: '', }
在componentWillMount中增加后端请求并赋值menuPermissionData
dispatch({ type: 'common/getMenuPermissionData', callback: res => { console.log(res); if (res && res.code == 20000) { this.setState({ menuPermissionData: JSON.stringify(res.data), }); } },
});
对于model，service请求需要自行开发
返回值格式：
{ "code": 20000, "msg": "操作成功", "data": [ { "menuList": [ { "menuList": [], "url": "/data/#/menu1/son", }, { "menuList": [ { "menuList": [], "url": "/data/#/menu2/:id", }, { "menuList": [], "url": "/data/#/menu3/:id/add", } ], "id": 399, "url": "/data/#/menu4", }, ], "id": 384, "url": "", } ] }
后端接口可以返回：/data/#/menu3/:id/add菜单
针对
/data/#/menu3/4/add
/data/#/menu3/5/add
可以通过
3.2、控制逻辑，增加两个方法
validMatchUrl =(menuPermissionDataStr, currentHashUrl) =>{ // currentHashUrl = '/operate/skuFormField/6'; let fullMatch = [];//完全匹配地址 let ruleMatch = [];//规则匹配地址 const regRule2 = /\//g; let menuPermissionData =JSON.parse(menuPermissionDataStr); const menuPermissionDataMd5 = localStorage.getItem('menuPermissionData'); const currentMenuMd5 = md5(JSON.stringify(menuPermissionData)); if (menuPermissionDataMd5 && menuPermissionDataMd5 === currentMenuMd5) { console.log('----cache-----',menuPermissionData); fullMatch = JSON.parse(localStorage.getItem('menuPermissionData_fullMatch')); ruleMatch = JSON.parse(localStorage.getItem('menuPermissionData_ruleMatch')); } else { console.log('----no cache-----',menuPermissionData); fullMatch.push("/"); fullMatch.push("/index"); menuPermissionData.map(t => { this.iterMenuList(fullMatch,ruleMatch,t.menuList); }); localStorage.setItem('menuPermissionData_fullMatch', JSON.stringify(fullMatch)); localStorage.setItem('menuPermissionData_ruleMatch', JSON.stringify(ruleMatch)); localStorage.setItem('menuPermissionData', currentMenuMd5); } //全匹配地址 console.log('using fullMatch route start'); if (fullMatch.indexOf(currentHashUrl) != -1) { //匹配成功 console.log('using fullMatch route result:true'); console.log('using fullMatch route end'); return true; } console.log('using fullMatch route end'); //规则匹配地址 // 原始URL分解 //路由个数 console.log('using ruleMatch route start'); const routkeyNum = currentHashUrl.match(regRule2).length; const matchRouteObj=ruleMatch.find(e => e && e.key === routkeyNum); if(matchRouteObj && matchRouteObj.value && matchRouteObj.value.length>0){ const tmpRuleMatchArr = matchRouteObj.value; for (let i = 0; i < tmpRuleMatchArr.length; i++) { const f = tmpRuleMatchArr[i]; let tmpFlag = true; for (let i = 0; i < f.length; i++) { if (f[i] === '/:') { tmpFlag = true; continue; } else if (f[i] !== ('/' + currentHashUrl.split('/').filter(d => d && d.length > 0)[i])) { tmpFlag = false; break; } } if (tmpFlag){ console.log('using ruleMatch route result:true'); console.log('using ruleMatch route end'); return true; } } } console.log('using ruleMatch route result:false'); console.log('using ruleMatch route end'); return false; } iterMenuList=(fullMatch,ruleMatch,menuList)=>{ const regRule2 = /\//g; if(menuList && menuList.length>0){ menuList.map(a => { const url = a.url.indexOf('#') != -1 ? a.url.split('#')[1] : a.url; if (url.indexOf('/:') == -1) { fullMatch.push(url);//完全匹配地址 } else { // 获取map是否有对应的路由个数 const routkey = url.match(regRule2).length; const tmpMapValue = ruleMatch.find(c => { return c && c.key === routkey; }); //构建当前URL const tmpRuleRuleArr = url.split('/').filter(c => { return c && c.length > 0; }); const tmpRuleRuleArr2 = tmpRuleRuleArr.map(b => { if (b && b.length > 0) { return b = b.startsWith(':') ? '/:' : ('/' + b); } }); if (tmpMapValue && tmpMapValue.value && tmpMapValue.value.length > 0) { tmpMapValue.value.push(tmpRuleRuleArr2); } else { // 没有的话添加 const a = []; a.push(tmpRuleRuleArr2); ruleMatch.push({ key: routkey, value: a }); } } this.iterMenuList(fullMatch,ruleMatch,a.menuList); }); }else{ return ; } }
3.3、render增加权限控制
数据引入
const { isMobile, menuData, menuPermissionData, openLocalConfig, isShowChildren } = this.state;
在Content中增加
<Content style={this.getContentStyle()}>
<Authorized
authority={routerConfig && routerConfig.authority}
noMatch={<Exception403 />}
>
{
(menuPermissionData != '') ?
(
this.validMatchUrl(menuPermissionData,location.hash.split('?')[0].replace(new RegExp('#', 'g'), ''))
? children:<Exception400 />
)
:''
}
</Authorized>
</Content>
