大多数的应用都需要身份验证机制和授权机制,当验证机制确认某些实体是合法用户时,授权机制将根据用户的角色和权限去决定用户是否被允许去执行这些操作
在大多数情况下,我们通常不需要特殊的模块或者库来处理授权,大多数的工具函数已经足够了。由你提供的应用内的验证或者授权解决方法是可以变化的。你可能会决定把用户的状态放到Redux去管理,你也可能创建一个专用的模块,等等...
让我们看看如何在React中处理一个简单的基于角色的授权机制
请记住接下来展现的是客户端的身份授权,这是很容易被绕过的,客户端上的授权更多地与用户体验有关,而不是与安全性有关。您需要确保服务端端上的角色是安全的
建议课程
之后我们创建一个auth.js文件,里面有一些工具方法可能帮助我们去检查用户的授权情况
export const isAuthenticated = user => !!user; export const isAllowed = (user, rights) => rights.some(right => user.rights.includes(right)); export const hasRole = (user, roles) => roles.some(role => user.roles.includes(role));
通过使用Array prototype上的some和includes方法,我们检查了客户是否用友至少一个权限或者角色,这应该足以执行一些基本的权限检查
因为用户对象可以保存在任何地方,以Redux为例子,我们允许将它作为参数传递给函数。
我们最终创建了一个简单的React组件,它使用了auth.js里的函数为了能够根据条件去显示界面上不同的部分
import React from 'react'; import { render } from "react-dom"; import { hasRole, isAllowed } from './auth'; const user = { roles: ['user'], rights: ['can_view_articles'] }; const admin = { roles: ['user', 'admin'], rights: ['can_view_articles', 'can_view_users'] }; const App = ({ user }) => ( <div> {hasRole(user, ['user']) && <p>Is User</p>} {hasRole(user, ['admin']) && <p>Is Admin</p>} {isAllowed(user, ['can_view_articles']) && <p>Can view Articles</p>} {isAllowed(user, ['can_view_users']) && <p>Can view Users</p>} </div> ); render( <App user={user} />, document.getElementById('root') );
我们使用 && 逻辑符进行短路评估(译者注:这里我直译了,大概的意思使用&&来决定页面内容是否展示)。在这里,如果hasRole或者isAllowed函数返回true,&&符号后面的内容建会被渲染。
尝试去将user改变为admin,你将看到admin相关的界面会被显示
如果你使用了React Router,你可以使用相同的方法,根据条件去渲染路由:
import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; const App = ({ user }) => ( <BrowserRouter> <Switch> {hasRole(user, ['user']) && <Route path='/user' component={User} />} {hasRole(user, ['admin']) && <Route path='/admin' component={Admin} />} <Route exact path='/' component={Home} /> </Switch> </BrowserRouter> );
React Router 让Route组件的声明和路由组合变得很容易,我们可以利用它:如果<Route>组件通过hasRole的校验被渲染,Route将会被Router增加和执行
评论删除后,数据将无法恢复
评论(1)
错别字:用友 -> 拥有