[譯]簡單的React身份校驗機制

原文

大多數的應用都須要身份驗證機制和受權機制，當驗證機制確認某些實體是合法用戶時，受權機制將根據用戶的角色和權限去決定用戶是否被容許去執行這些操做

在大多數狀況下，咱們一般不須要特殊的模塊或者庫來處理受權，大多數的工具函數已經足夠了。由你提供的應用內的驗證或者受權解決方法是能夠變化的。你可能會決定把用戶的狀態放到Redux去管理，你也可能建立一個專用的模塊，等等...

讓咱們看看如何在React中處理一個簡單的基於角色的受權機制

簡單的受權機制

假設咱們有一個用戶對象，這個對象一般是在完成登陸後經過調用一個終端得到的，它有如下的結構

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

用戶有幾個能夠分組爲角色的權限。對於你的應用，你可能只須要角色，或者只須要權限或者二者都須要，那都不是問題。REST API 可能給你嵌套在角色裏的權限，那也不是問題，請記住一點，你要根據你的需求來調整解決方案。最重要的是咱們擁有一個用戶對象。

以後咱們建立一個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上的some和includes方法，咱們檢查了客戶是否用友至少一個權限或者角色，這應該足以執行一些基本的權限檢查

由於用戶對象能夠保存在任何地方，以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相關的界面會被顯示

條件路由

若是你使用了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*增長和執行