简单的 React 授权机制 已翻译 100%

昂贵甜头昂贵甜头 投递于 2019/01/14 14:00 (共 5 段, 翻译完成于 01-23)
浏览 781
收藏 1
1
加载中

大年夜多半的应用都须要身份验证机制和授权机制,当验证机制确认某些实体是合法用户时,授权机制将根据用户的角色和权限去决定用户能否被许可去履行这些操作

在大年夜多半情况下,我们平日不须要特别的模块或许库来处理授权,大年夜多半的对象函数曾经足够了。由你供给的应用内的验证或许授权处理办法是可以变更的。你能够会决定把用户的状况放到Redux去管理,你也能够创建一个公用的模块,等等...

让我们看看如安在React中处理一个简单的基于角色的授权机制

请记住接上去展示的是客户真个身份授权,这是很轻易被绕过的,客户端上的授权更多地与用户体验有关,而不是与安然性有关。您须要确保办事端端上的角色是安然的

建议课程

Web Bos的全栈进阶React与GraphQL
 

 

昂贵甜头昂贵甜头
翻译于 2019/01/17 09:31
1

简单的授权机制

假定我们有一个用户对象,这个对象平日是在完成登录后经过过程调用一个终端取得的,它有以下的构造

const user = {
  name: 'Jackator',
  // ...
  roles: ['user'],
  rights: ['can_view_articles']
};

用户有几个可以分组为角色的权限。关于你的应用,你能够只须要角色,或许只须要权限或许二者都须要,那都不是成绩。REST API 能够给你嵌套在角色里的权限,那也不是成绩,请记住一点,你要根据你的需求来调剂处理筹划。最重要的是我们具有一个用户对象。

昂贵甜头昂贵甜头
翻译于 2019/01/17 09:32
0

以后我们创建一个auth.js文件,外面有一些对象办法能够赞助我们去检查用户的授权情况

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上的someincludes办法,我们检查了客户能否用友至少一个权限或许角色,这应当足以履行一些根本的权限检查

昂贵甜头昂贵甜头
翻译于 2019/01/17 09:33
0

由于用户对象可以保存在任何处所,以Redux为例子,我们许可将它作为参数传递给函数。

我们终究创建了一个简单的React组件,它应用了auth.js里的函数为了可以或许根据条件去显示界面上不合的部分

App.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相干的界面会被显示

昂贵甜头昂贵甜头
翻译于 2019/01/17 09:33
0

条件路由

假设你应用了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增长和履行

昂贵甜头昂贵甜头
翻译于 2019/01/17 09:34
0
本文中的一切译文仅用于进修和交换目标,转载请务必注明文章译者、出处、和本文链接。
我们的翻译任务遵守 CC 协定,假设我们的任务有侵犯到您的权益,请及时接洽我们。
加载中

评论(1)

C
CccccHc
" 经过过程应用Array prototype上的some和includes办法,我们检查了客户能否用友至少一个权限或许角色,这应当足以履行一些根本的权限检查"
错别字:用友 -> 具有
前往顶部
顶部