背景
在項目中要求在后臺系統控制管理權限。在之前做過的后臺管理系統權限控制是用Vue,這樣的話就可以用路由鉤子里做權限比對和攔截處理。但這次我們說的是在一個后臺系統需要加入權限管理控制,技術棧是React。現在我們就看看實現過程吧。
原代碼基于 react 16.x、dva 2.4.1 實現,所以本文是參考了ant-design-pro v1內部對權限管理的實現
所謂的權限控制是什么?
一般后臺管理系統的權限涉及到兩種:
資源權限
數據權限
資源權限一般指菜單、頁面、按鈕等的可見權限。
數據權限一般指對于不同用戶,同一頁面上看到的數據不同。
本文主要是來探討一下資源權限,也就是前端權限控制。這又分為了兩部分:
側邊欄菜單
路由權限
用戶對于前端權限控制就是左側菜單的可見與否,并不是如此。簡單來說,當用戶guest沒有路由/setting的訪問權限,這樣就可以知道/setting的完整路徑,就可以直接訪問進入。這樣沒有任何作用啊。這部分其實就屬于路由層面的權限控制。
實現思路
關于前端權限控制一般有兩種方案:
前端固定路由表和權限配置,由后端提供用戶權限標識
后端提供權限和路由信息結構接口,動態生成權限和菜單
我們這里采用的是第一種方案,服務只下發當前用戶擁有的角色就可以了,路由表和權限的處理統一在前端處理。
整體實現思路也比較簡單:現有權限(currentAuthority)和準入權限(authority)做比較,如果匹配則渲染和準入權限匹配的組件,否則渲染無權限組件(403 頁面)
路由權限
既然是路由相關的權限控制,我們免不了先看一下當前的路由表:
{ "name": "活動列表", "path": "/activity-mgmt/list", "key": "/activity-mgmt/list", "exact": true, "authority": [ "admin" ], "component": ? LoadableComponent(props), "inherited": false, "hideInBreadcrumb": false }, { "name": "優惠券管理", "path": "/coupon-mgmt/coupon-rule-bplist", "key": "/coupon-mgmt/coupon-rule-bplist", "exact": true, "authority": [ "admin", "coupon" ], "component": ? LoadableComponent(props), "inherited": true, "hideInBreadcrumb": false }, { "name": "營銷錄入系統", "path": "/marketRule-manage", "key": "/marketRule-manage", "exact": true, "component": ? LoadableComponent(props), "inherited": true, "hideInBreadcrumb": false }
這份路由表其實是我從控制臺 copy 過來的,內部做了很多的轉換處理,但最終生成的就是上面這個對象。
這里每一級菜單都加了一個authority字段來標識允許訪問的角色。component代表路由對應的組件:
import React, { createElement } from "react" import Loadable from "react-loadable" "/activity-mgmt/list": { component: dynamicWrapper(app, ["activityMgmt"], () => import("../routes/activity-mgmt/list")) }, // 動態引用組件并注冊model const dynamicWrapper = (app, models, component) => { // register models models.forEach(model => { if (modelNotExisted(app, model)) { // eslint-disable-next-line app.model(require(`../models/${model}`).default) } }) // () => require('module') // transformed by babel-plugin-dynamic-import-node-sync // 需要將routerData塞到props中 if (component.toString().indexOf(".then(") < 0) { return props => { return createElement(component().default, { ...props, routerData: getRouterDataCache(app) }) } } // () => import('module') return Loadable({ loader: () => { return component().then(raw => { const Component = raw.default || raw return props => createElement(Component, { ...props, routerData: getRouterDataCache(app) }) }) }, // 全局loading loading: () => { return ( <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }} > <Spin size="large" className="global-spin" /> </div> ) } }) }
復制代碼
有了路由表這份基礎數據,下面就讓我們來看下如何通過一步步的改造給原有系統注入權限。
先從src/router.js這個入口開始著手:
// 原src/router.js import dynamic from "dva/dynamic" import { Redirect, Route, routerRedux, Switch } from "dva/router" import PropTypes from "prop-types" import React from "react" import NoMatch from "./components/no-match" import App from "./routes/app" const { ConnectedRouter } = routerRedux const RouterConfig = ({ history, app }) => { const routes = [ { path: "activity-management", models: () => [import("@/models/activityManagement")], component: () => import("./routes/activity-mgmt") }, { path: "coupon-management", models: () => [import("@/models/couponManagement")], component: () => import("./routes/coupon-mgmt") }, { path: "order-management", models: () => [import("@/models/orderManagement")], component: () => import("./routes/order-maint") }, { path: "merchant-management", models: () => [import("@/models/merchantManagement")], component: () => import("./routes/merchant-mgmt") } // ... ] return ( <ConnectedRouter history={history}> <App> <Switch> {routes.map(({ path, ...dynamics }, key) => ( <Route key={key} path={`/${path}`} component={dynamic({</p> <p> app,</p> <p> ...dynamics</p> <p> })} /> ))} <Route component={NoMatch} /> </Switch> </App> </ConnectedRouter> ) } RouterConfig.propTypes = { history: PropTypes.object, app: PropTypes.object } export default RouterConfig
這是一個非常常規的路由配置,既然要加入權限,比較合適的方式就是包一個高階組件AuthorizedRoute。然后router.js就可以更替為:
function RouterConfig({ history, app }) { const routerData = getRouterData(app) const BasicLayout = routerData["/"].component return ( <ConnectedRouter history={history}> <Switch> <AuthorizedRoute path="/" render={props => <BasicLayout {...props} />} /> </Switch> </ConnectedRouter> ) }
來看下AuthorizedRoute的大致實現:
const AuthorizedRoute = ({ component: Component, authority, redirectPath, {...rest} }) => { if (authority === currentAuthority) { return ( <Route {...rest} render={props => <Component {...props} />} /> ) } else { return ( <Route {...rest} render={() => <Redirect to={redirectPath} /> } /> ) } }
我們看一下這個組件有什么問題:頁面可能允許多個角色訪問,用戶擁有的角色也可能是多個(可能是字符串,也可呢是數組)。
直接在組件中判斷顯然不太合適,我們把這部分邏輯抽離出來:
/** * 通用權限檢查方法 * Common check permissions method * @param { 菜單訪問需要的權限 } authority * @param { 當前角色擁有的權限 } currentAuthority * @param { 通過的組件 Passing components } target * @param { 未通過的組件 no pass components } Exception */ const checkPermissions = (authority, currentAuthority, target, Exception) => { console.log("checkPermissions -----> authority", authority) console.log("currentAuthority", currentAuthority) console.log("target", target) console.log("Exception", Exception) // 沒有判定權限.默認查看所有 // Retirement authority, return target; if (!authority) { return target } // 數組處理 if (Array.isArray(authority)) { // 該菜單可由多個角色訪問 if (authority.indexOf(currentAuthority) >= 0) { return target } // 當前用戶同時擁有多個角色 if (Array.isArray(currentAuthority)) { for (let i = 0; i < currentAuthority.length; i += 1) { const element = currentAuthority[i] // 菜單訪問需要的角色權限 < ------ > 當前用戶擁有的角色 if (authority.indexOf(element) >= 0) { return target } } } return Exception } // string 處理 if (typeof authority === "string") { if (authority === currentAuthority) { return target } if (Array.isArray(currentAuthority)) { for (let i = 0; i < currentAuthority.length; i += 1) { const element = currentAuthority[i] if (authority.indexOf(element) >= 0) { return target } } } return Exception } throw new Error("unsupported parameters") } const check = (authority, target, Exception) => { return checkPermissions(authority, CURRENT, target, Exception) }
首先如果路由表中沒有authority字段默認都可以訪問。
接著分別對authority為字符串和數組的情況做了處理,其實就是簡單的查找匹配,匹配到了就可以訪問,匹配不到就返回Exception,也就是我們自定義的異常頁面。
有一個點一直沒有提:用戶當前角色權限currentAuthority如何獲取?這個是在頁面初始化時從接口讀取,然后存到store中
有了這塊邏輯,我們對剛剛的AuthorizedRoute做一下改造。首先抽象一個Authorized組件,對權限校驗邏輯做一下封裝:
import React from "react" import CheckPermissions from "./CheckPermissions" class Authorized extends React.Component { render() { const { children, authority, noMatch = null } = this.props const childrenRender = typeof children === "undefined" ? null : children return CheckPermissions(authority, childrenRender, noMatch) } } export default Authorized
接著AuthorizedRoute可直接使用Authorized組件:
import React from "react" import { Redirect, Route } from "react-router-dom" import Authorized from "./Authorized" class AuthorizedRoute extends React.Component { render() { const { component: Component, render, authority, redirectPath, ...rest } = this.props 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
這里采用了render props的方式:如果提供了component props就用component渲染,否則使用render渲染。
菜單權限
菜單權限的處理相對就簡單很多了,統一集成到SiderMenu組件處理:
export default class SiderMenu extends PureComponent { constructor(props) { super(props) } /** * get SubMenu or Item */ getSubMenuOrItem = item => { if (item.children && item.children.some(child => child.name)) { const childrenItems = this.getNavMenuItems(item.children) // 當無子菜單時就不展示菜單 if (childrenItems && childrenItems.length > 0) { return ( <SubMenu title={ item.icon ? ( <span> {getIcon(item.icon)} <span>{item.name}</span> </span> ) : ( item.name ) } key={item.path} > {childrenItems} </SubMenu> ) } return null } return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item> } /** * 獲得菜單子節點 * @memberof SiderMenu */ getNavMenuItems = menusData => { if (!menusData) { return [] } return menusData .filter(item => item.name && !item.hideInMenu) .map(item => { // make dom const ItemDom = this.getSubMenuOrItem(item) return this.checkPermissionItem(item.authority, ItemDom) }) .filter(item => item) } /** * * @description 菜單權限過濾 * @param {*} authority * @param {*} ItemDom * @memberof SiderMenu */ checkPermissionItem = (authority, ItemDom) => { const { Authorized } = this.props if (Authorized && Authorized.check) { const { check } = Authorized return check(authority, ItemDom) } return ItemDom } render() { // ... return <Sider trigger={null} collapsible collapsed={collapsed} breakpoint="lg" onCollapse={onCollapse} className={siderClass} > <div className="logo"> <Link to="/home" className="logo-link"> {!collapsed && <h1>馮言馮語</h1>} </Link> </div> <Menu key="Menu" theme={theme} mode={mode} {...menuProps} onOpenChange={this.handleOpenChange} selectedKeys={selectedKeys} > {this.getNavMenuItems(menuData)} </Menu> </Sider> } }
注意在核心代碼中checkPermissionItem就是實現菜單權限的關鍵,就在同樣用到了上文中的check方法來對當前菜單進行權限比對,如果沒有權限就直接不展示當前菜單。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/127834.html
摘要:在的的配置中添加自定義主題由腳手架和官網介紹,我們已經自己配置并新建好了主題文件。單頁面博客從前端到后端環境搭建單頁面博客從前端到后端基于搭建博客前后臺界面單頁面博客從前端到后端基于和的權限驗證與的設計 在上篇文章我們已經搭建好了基礎的開發環境,接下來會介紹如何引入 DVA 和 ANTD ,以及在引入過程中需要注意的問題。這里只會詳細的書寫部分組件,其他的組件都是大同小異。你可以在 g...
摘要:前言以前一直是用進行的開發于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設置的版本。 前言 以前一直是用vue進行的開發, 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了 本來是想寫一個 類似 Vue仿今日頭條 那樣...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28