Как обновить http заголовок Axios?

Question

[Sergey750il]

Доброго времени суток. Как при получении токена динамически обновить http заголовок в axios? Сейчас при получении, в state токен меняется, но запросы идут со старым токеном в заголовке, приходиться полностью обновить страницу, что бы запросы начали отправляться с новым заголовком. Почему необходимо перезагружать страницу, что бы сменить заголовок?

Answer 1

[coderisimo]

axios.defaults.headers.common['Auth-Token'] = 'new token';

Comments

[Sergey750il]

В том то и дело, что меня этот код в экшене.

async refreshToken({commit}) {
      //const token = localStorage.getItem('token');
      console.log(this.state.auth.refresh_id);
      var resp = await axios({
        url: "xxx xxx xxxx",
        data: {
          Refresh_id: this.state.auth.refresh_id,
          ClientName: "MainProject",
        },
        method: "POST",
      });

      const token = resp.data.access_token;
      const user = resp.data.UserId;
      const roles = resp.data.UserRoles;
      const refresh_id = resp.data.refresh_id;
      localStorage.setItem("token", token);
      localStorage.setItem("role", roles);
      localStorage.setItem("refresh_id", refresh_id);
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      commit("auth_success", {
        token: token,
        user: user,
        roles: roles,
        refresh_id: refresh_id,
      });
      console.log('refTok',resp)
      return await resp;
    },

[coderisimo]

Sergey750il, насколько я помню такие вещи делаются через axios interceptor . Погуглите , в интернете куча примеров. Суть в том, что interceptor срабатывает перед каждым запросом и можно довольно гибко работать с токенами. Например, если запрос не не прошел из-за устаревшего токена , запускается процедура его обновления. Ну и заголовок перед каждым запросом устанавливается из локал сторэйдж.

[Sergey750il]

coderisimo, Да я так сделал, только у меня в интерцепторе вызывается экшен получающий токен и записывающий в store.

[coderisimo]

Sergey750il, это хорошо )) а теперь в нем же перед запросом устанавливайте нужный токен в header. Насколько я понимаю defaults менять не получится (на это многие натыкались). Нужно либо создавать новый инстанс (пример из доки)

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

либо , как писал выше (и в вашем случае это проще) устанавливать актуальный токен в headers в interceptor

[Sergey750il]

export default function axiosSetUp() {
   // alert('sss')
    // point to your API endpoint
    //axios.defaults.baseURL = "<http://127.0.0.1:8000/api/>";
    // Add a request interceptor
    
    axios.interceptors.request.use(
      function(config) {
         const token  = store.state.auth.token;
        // Do something before request is sent

       // const token = store.state.auth.token;
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
      },
      function(error) {
        // Do something with request error
        return Promise.reject(error);
      }
    );
  
    // Add a response interceptor
    axios.interceptors.response.use(
      function(response) {
        //await store.dispatch("refreshToken");
        // Any status code that lie within the range of 2xx cause this function to trigger
        // Do something with response data
 
        return response;
      },
      async function(error) {
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        // Do something with response error
        const originalRequest = error.config;
        if (
          error.response.status === 401 &&
          originalRequest.url.includes("auth/jwt/refresh/")
        ) {
          //store.commit("clearUserData");
          router.push("/login");
          return Promise.reject(error);
        } else if (error.response.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;
          await store.dispatch("refreshToken");
          return axios(originalRequest);
        }
        return Promise.reject(error);
      }
    );

    //store.dispatch("refreshToken")
  }

[Sergey750il]

Если я правильно понял то так?

[coderisimo]

Sergey750il, возможно))) пробуйте. Я с телефона, проекта с axios под рукой нет

[Sergey750il]

Этот блок

if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }