axi에서 인가 베어러 토큰을 설정하려면 어떻게 해야 합니다.

axi에서 인가 베어러 토큰을 설정하려면 어떻게 해야 합니다.

안녕하세요. 사용자 jwt 토큰을 로컬 스토리지에 저장하는 로그인 작업(Vuex 사용)을 만들었습니다.이 로그인 액션 내에서 다른 액션을 호출하여 이 사용자가 작성한 게시물을 가져옵니다.fetchPosts 액션에서 get 요청 헤더에 토큰을 전달하면 정상적으로 동작합니다.

async login(context, user){
    try {
       const res = await api.post('/users/login', user)
       localStorage.setItem('jwt', res.data.token)
       context.commit('SET_USER', res.data.user)
       context.dispatch('fetchPosts')
    }catch(err){
       console.log(err.response.data)
    }
}

async fetchPosts(context){
    try {
        const res = await api.get('/posts', {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('jwt')}`
          }
        })
        context.commit('SET_POSTS', res.data)
     }catch(err){
        console.log(err.response.data)
     }
}

위의 코드는 완벽하게 동작하지만 문제는 여러 인증 루트가 있으며 통과하고 싶지 않다는 것입니다.

headers: { Authorization: `Bearer ${localStorage.getItem('jwt')}`}

모든 api 요구에 대응합니다.

1개의 파일로 설정하려고 하는데 로그인하면 인증되지 않은 메시지가 표시되고 [Networks]탭에 체크인하면 베어러 늘이 인가로 넘어갑니다.설정을 실시하려면 , 이하를 참조해 주세요.

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('jwt')}`
  }
})

이 문제를 해결하기 위해 제가 어디에 문제가 있는지 또는 무엇을 할 수 있는지 아는 사람은 누구나 있습니다.

다음은 그 방법의 간단한 예입니다.

    axios.interceptors.request.use(
        (config) => {
            const token = localStorage.getItem('authtoken');
    
            if (token) {
                config.headers['Authorization'] = `Bearer ${token}`;
            }
    
            return config;
        },
    
        (error) => {
            return Promise.reject(error);
        }
    );

자세한 내용은 이쪽

이것을 main.js 파일에 추가합니다.

    axios.interceptors.request.use(config => {
      const token = localStorage.getItem("jwt");
      config.headers["Authorization"] = `Bearer ${token}`;
      return config;
    });

작성한 Axios 인스턴스에 인터셉터를 직접 적용할 수 있습니다.

import axios from "axios";

const baseDomain = process.env.VUE_APP_API_URL;

const baseURL = `${baseDomain}`;
const instance = axios.create({
  baseURL
});
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('accesstoken');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }

    return config;
  },

  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

https://axios-http.com/docs/config_defaults

언급URL : https://stackoverflow.com/questions/67937204/how-to-configure-authorization-bearer-token-in-axios