Saya memiliki aplikasi react / redux yang mengambil token dari server api. Setelah pengguna mengautentikasi, saya ingin membuat semua permintaan axios memiliki token itu sebagai header Otorisasi tanpa harus melampirkannya secara manual ke setiap permintaan dalam tindakan. Saya cukup baru untuk bereaksi / redux dan tidak yakin dengan pendekatan terbaik dan saya tidak menemukan kualitas apa pun di Google.
Berikut adalah pengaturan redux saya:
// 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;
}
}
Token saya disimpan di toko redux di bawah state.session.token.
Saya agak bingung bagaimana melanjutkan. Saya telah mencoba membuat contoh axios dalam file di direktori root saya dan memperbarui / impor itu alih-alih dari node_modules tetapi tidak melampirkan tajuk ketika keadaan berubah. Setiap umpan balik / ide sangat dihargai, terima kasih.