簡單的 React 授權機制

大多數的應用都需要身份驗證機制和授權機制，當驗證機制確認某些實體是合法使用者時，授權機制將根據使用者的角色和許可權去決定使用者是否被允許去執行這些操作

在大多數情況下，我們通常不需要特殊的模組或者庫來處理授權，大多數的工具函式已經足夠了。由你提供的應用內的驗證或者授權解決方法是可以變化的。你可能會決定把使用者的狀態放到redux去管理，你也可能建立乙個專用的模組，等等...

讓我們看看如何在react中處理乙個簡單的基於角色的授權機制

請記住接下來展現的是客戶端的身份授權，這是很容易被繞過的，客戶端上的授權更多地與使用者體驗有關，而不是與安全性有關。您需要確保服務端端上的角色是安全的。

假設我們有乙個使用者物件，這個物件通常是在完成登入後通過呼叫乙個終端獲得的，它有以下的結構

const user = ;

使用者有幾個可以分組為角色的許可權。對於你的應用，你可能只需要角色，或者只需要許可權或者兩者都需要，那都不是問題。rest api 可能給你巢狀在角色裡的許可權，那也不是問題，請記住一點，你要根據你的需求來調整解決方案。最重要的是我們擁有乙個使用者物件。

之後我們建立乙個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  from "react-dom";
import  from './auth';
const user = ;
const admin = ;
);render(
document.getelementbyid('root')
);

我們使用 && 邏輯符進行短路評估（譯者注：這裡我直譯了，大概的意思使用&&來決定頁面內容是否展示）。在這裡，如果hasrole或者isallowed函式返回true，&&符號後面的內容建會被渲染。

嘗試去將user改變為admin，你將看到admin相關的介面會被顯示

如果你使用了react router，你可以使用相同的方法，根據條件去渲染路由：

import react from 'react';
import  from 'react-router-dom';
);

react router 讓route元件的宣告和路由組合變得很容易，我們可以利用它：如果元件通過hasrole的校驗被渲染，route將會被router增加和執行。

簡單的 React 授權機制

OAuth 授權機制

React事件機制

基於規則的授權機制

簡單的 React 授權機制

OAuth 授權機制

React事件機制

基於規則的授權機制

相關推薦