내 프로젝트에 reactjs를 사용하고 있지만 글로벌 axios 구성을 설정하는 config.js 파일에서 axios 요청에 대한 기본 헤더를 설정하고 있지만 axios 요청을 할 때 요청에 해당 헤더를 보내지 않습니다. .
config.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'URL/api'
});
export const setAuthToken = (token) => {
if (token) {
// Apply to every request
instance.defaults.headers.common['Authorization'] = 'Bearer ' + token;
} else {
// Delete auth header
delete instance.defaults.headers.common['Authorization'];
}
};
export default instance;
Login.js
import axios from '../../../config';
import { setAuthToken } from '../../../config';
axios
.post('/auth/signin', {
username: email,
password: password
})
.then((res) => {
setCurrentUser(res.data);
setAuthToken(res.data.accessToken);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
setError(true);
});
이 작업에 axios 인터셉터 를 사용할 수 있습니다 .
1-) 성공적인 로그인 내에서 검색된 토큰을 localStorage에 넣습니다. setAuthToken 행을 제거하십시오.
.then((res) => {
setCurrentUser(res.data);
localStorage.setItem("token", res.data.accessToken);
setLoading(false);
})
2-)이 인터셉터를 axios 인스턴스에 추가합니다.
const instance = axios.create({
baseURL: 'URL/api'
});
instance.interceptors.request.use(
function(config) {
const token = localStorage.getItem("token");
if (token) {
config.headers["Authorization"] = 'Bearer ' + token;
}
return config;
},
function(error) {
return Promise.reject(error);
}
);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다