如何處理reactjs中的令牌認證？

Question

假設我有用於登錄的API，註銷。我正在使用令牌認證。 我有反應組件名稱登錄。我可以調用API並獲得令牌。但是，我不理解如何在瀏覽器中保存令牌，直到註銷或在片刻之後自動銷燬令牌。

Answer 1

您可以使用universal-cookie包來設置它在Cookie，

const cookies = new Cookies(); 
cookies.set('token', this.token, { path: '/' }); 

不要忘了從universal-cookie進口（或需要）Cookies。

你可以使用恢復回來：

cookies.get('token'); 

參考https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie

您可以將其保存在本地存儲以及：

localStorage.setItem('token', this.token); 

但保存在cookie將是一個更好的主意，參考：

Local Storage vs Cookies

Answer 2

您可以創建存儲模塊並檢查客戶端瀏覽器中的可用存儲。

import LocalStorage from "./localstorage" 
import Cookie from "./cookie" 

// Function to check availability of `localStorage` 
function storageAvailable() { 
    try { 
     var storage = window["localStorage"], 
      x = '__storage_test__'; 
     storage.setItem(x, x); 
     storage.removeItem(x); 
     return true; 
    } 
    catch(e) { 
     return false; 
    } 
} 

export default function Storage() { 
    return storageAvailable() ? LocalStorage : Cookie 
} 

使用上述模塊：

function login(redirect = '/home') { 
    // set your session data 
    storage.set({email, id}) 

    // redirection 
    window.location.href = redirect 
} 

function logout(redirect = "/") { 
    storage.clear() 

    // redirection 
    window.location.href = redirect 
} 
const Session = { 
    login, 
    logout 
} 

export default Session 

現在，你可以簡單地使用登錄和註銷您的Session模塊分別Session.login()和Session.logut()。

如何使用的cookie： How do I create and read a value from cookie?

如何使用localStorage的：Storing Objects in HTML5 localStorage