Tôi có một ứng dụng react / redux tìm nạp mã thông báo từ máy chủ api. Sau khi người dùng xác thực, tôi muốn làm cho tất cả các yêu cầu axios có mã thông báo đó làm tiêu đề Ủy quyền mà không cần phải đính kèm thủ công nó vào mọi yêu cầu trong hành động. Tôi còn khá mới đối với react / redux và không chắc về cách tiếp cận tốt nhất và không tìm thấy bất kỳ lượt truy cập chất lượng nào trên google.
Đây là thiết lập redux của tôi:
// actions.js
import axios from 'axios';
export function loginUser(props) {
const url = `https://api.mydomain.com/login/`;
const { email, password } = props;
const request = axios.post(url, { email, password });
return {
type: LOGIN_USER,
payload: request
};
}
export function fetchPages() {
/* here is where I'd like the header to be attached automatically if the user
has logged in */
const request = axios.get(PAGES_URL);
return {
type: FETCH_PAGES,
payload: request
};
}
// reducers.js
const initialState = {
isAuthenticated: false,
token: null
};
export default (state = initialState, action) => {
switch(action.type) {
case LOGIN_USER:
// here is where I believe I should be attaching the header to all axios requests.
return {
token: action.payload.data.key,
isAuthenticated: true
};
case LOGOUT_USER:
// i would remove the header from all axios requests here.
return initialState;
default:
return state;
}
}
Mã thông báo của tôi được lưu trữ trong cửa hàng redux dưới state.session.token.
Tôi hơi mất cách để tiếp tục. Tôi đã thử tạo một phiên bản axios trong một tệp trong thư mục gốc của mình và cập nhật / nhập tệp đó thay vì từ node_modules nhưng nó không đính kèm tiêu đề khi trạng thái thay đổi. Bất kỳ phản hồi / ý tưởng được đánh giá cao, cảm ơn.