我有一個 Home.js 組件，它讓用戶注冊 API 并登錄，然后從回應授權標頭獲取令牌并將其保存在狀態“令牌”變數中。
發出請求時，此令牌將在所有其他組件中用于訪問 API，那么將此值用于所有其他組件的最佳方法是什么？
主頁.js：
const SIGNUP_URL = 'http://localhost:8080/users/signup';
const LOGIN_URL = 'http://localhost:8080/login';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated:false,
token: ''
};
}
componentDidMount() {
const payload = {
"username": "hikaru",
"password": "JohnSmith72-"
};
fetch(SIGNUP_URL, {
method: 'POST',
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
})
.then(response => response.json())
.then((data) => {
console.log(data);
});
fetch(LOGIN_URL, {
method: 'POST',
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
})
.then(response =>
this.setState({token: response.headers.get("Authorization"), isAuthenticated:true})
)
}
例如，userList 組件將從 API 獲取用戶資料，但需要存盤在 Home 組件的令牌狀態變數中的 API 令牌才能通過授權標頭成功發送請求。
謝謝你的幫助
uj5u.com熱心網友回復：
您應該使用 AuthContext 和 localStorage 來執行此操作，將令牌保存在 state 或 localStorage 中，并制作一個組態檔，該檔案在呼叫我在 axios 中完成的 api 時使用相同的令牌。Axios 有一個攔截器的概念，它允許我們將令牌附加到我們的 api 呼叫，我在成功登錄后將令牌保存在 localStorage 中，然后使用來自 localStorage 的相同令牌添加到每個需要令牌的呼叫中，如果 api 沒有需要一個令牌（一些apis可以是公開的）我可以直接使用axios，查看下面的代碼：
import axios from 'axios';
let apiUrl = '';
let imageUrl = '';
if(process.env.NODE_ENV === 'production'){
apiUrl = `${process.env.REACT_APP_LIVE_URL_basePath}/web/v1/`;
}else{
apiUrl = `http://127.0.0.1:8000/web/v1/`;
}
const config = {
baseURL: apiUrl,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "https://www.crazyforstudy.com",
'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE',
},
};
const authAxios = axios.create(config);
authAxios.interceptors.request.use(async function(config) {
config.headers.Authorization = localStorage.getItem('access_token') ?
`Bearer ${localStorage.getItem('access_token')}` :
``;
return config;
});
export { apiUrl, axios, authAxios };
現在在進行 api 呼叫時，您可以執行以下操作：
import { apiUrl, authAxios } from '../config/config'
export async function saveAssignment(data) {
try {
const res = await authAxios.post(apiUrl 'assignment/save-assignment', data)
return res.data;
}
catch(e){
}
}
這里要注意我不是使用 axios 進行 api 呼叫，而是使用 authAxios 進行呼叫（從組態檔中匯出），這將在標頭中包含令牌。
（您也可以使用像 Redux 這樣的第三方庫，但概念保持不變）
uj5u.com熱心網友回復：
您可以創建一個自定義函式authenticated_request，例如呼叫。此函式可以從 CookieStorage 獲取您的令牌，以防萬一是 web 或異步存盤（如果是 react-native 或即使您在某些狀態管理庫中擁有它）。沒關系。使用此函式代替fetch函式并在其中呼叫 fetch。將其視為網路請求的高階函式。
const authenticated_request(url, config) {
fetch(url, {
...config,
headers: {
...config.headers,
Authorization: getToken()
}
});
}
您還可以利用axios之類的東西，并使用請求攔截器來攔截請求和回應。根據需要注入您的令牌。
uj5u.com熱心網友回復：
您需要一個集中的狀態，這就是狀態管理庫的用途。你可以使用第三方庫，比如Redux，或者簡單地使用 React 自己的context。你可以在 google 上搜索 React 中的狀態管理，你會發現很多有用的資源
uj5u.com熱心網友回復：
如果您的應用程式是 SSR，您可以將令牌放入 cookie。為此，您必須創建以下函式：
export const eraseCookie = (name) => {
document.cookie = `${name}=; Max-Age=-99999999;`;
};
export const getCookie = (name) => {
const pairs = document.cookie.split(';');
const pair = pairs.find((cookie) => cookie.split('=')[0].trim() === name);
if (!pair) return '';
return pair.split('=')[1];
};
export const setCookie = (name, value, domain) => {
if (domain) {
document.cookie = `${name}=${value};path=/`;
} else {
document.cookie = `${name}=${value}`;
}
};
您還可以將您的令牌放入本地存盤：
通過內置函式設定到本地存盤：
localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
通過內置函式獲取令牌：
const token = localStorage.getItem('token');
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360022.html
標籤：javascript 反应 json 反应原生 要求