Сохранение токена в заголовке

204
06 декабря 2018, 07:40

Всем привет,у меня вот такая проблема,не получается сохранить токен в заголовке Приходится вот так постоянно его задавать,но так не должно быть

 mounted() {
     axios.get('api/v1/inspection/script', {
       headers: {
         Authorization: `Bearer ${localStorage.getItem('user-token')}`,
       },
    })
       .then(response => (this.info = response.data));
  },

Вот код моей авторизации

const initialState = { token: localStorage.getItem('user-token') || '', status: '', hasLoadedOnce: false };
const getters = {
  isAuthenticated: state => !!state.token,
  authStatus: state => state.status,
};
const actions = {
  [AUTH_REQUEST]: ({ commit, dispatch }, user) => new Promise((resolve, reject) => {
    commit(AUTH_REQUEST);
    axios({ url: 'api/v1/tokens', data: user, method: 'POST' })
      .then((resp) => {
        // eslint-disable-next-line
        const token = resp.data.token;
        localStorage.setItem('user-token', token);
        axios.defaults.headers.common.Authorization = token;
        commit(AUTH_SUCCESS, resp.data);
        dispatch(USER_REQUEST);
        resolve(resp);
        VueNotifications.success({ message: 'Вход выполнен успешно' });
      })
      .catch((err) => {
        commit(AUTH_ERROR, err);
        localStorage.removeItem('user-token');
        reject(err);
        VueNotifications.error({ message: 'Неправильный логин или пароль' });
      });
  }),
  [AUTH_LOGOUT]: ({ commit }) => new Promise((resolve) => {
    commit(AUTH_LOGOUT);
    localStorage.removeItem('user-token');
    delete axios.defaults.headers.common.Authorization;
    resolve();
  }),
};
const mutations = {
  [AUTH_REQUEST]: (state) => {
    state.status = 'loading';
  },
  [AUTH_SUCCESS]: (state, resp) => {
    state.status = 'success';
    state.token = resp.token;
    state.hasLoadedOnce = true;
  },
  [AUTH_ERROR]: (state) => {
    state.status = 'error';
    state.hasLoadedOnce = true;
  },
  [AUTH_LOGOUT]: (state) => {
    state.token = '';
  },
};
export default {
  state: initialState,
  getters,
  actions,
  mutations,
};
Answer 1

Можете указать interceptors для axios:

axios.interceptors.request.use(config => { 
  const token = store.state.auth.token 
 
  if (token) 
    config.headers.Authorization = `Bearer ${token}` 
 
  return config 
})

Можно еще использовать плагин axios для vue, вот ссылка на него: https://www.npmjs.com/package/vue-plugin-axios

Вот как с ним сделать:

import Vue from 'vue' 
import VueAxios from 'vue-plugin-axios' 
import axios from 'axios' 
import store from '@/store' 
 
Vue.use(VueAxios, { 
  axios, // указать саму axios библиотеку 
  config: { 
    // api URL 
    baseURL: 'http://localhost:8000/api/', 
  }, 
  interceptors: { 
    beforeRequest (config) { 
      // берет токен из store 
      const token = store.state.auth.token 
  
      // если есть токен то ставит его 
      if (token) 
        config.headers.Authorization = `Bearer ${token}` 
       
      return config 
    } 
  } 
})

Теперь можно делать легко запросы:

// get запрос
this.users = await this.$get('api/get-users/')
// post запрос
this.users2 = await this.$post('api/get-users/')

Не нужно писать

import axios from axios
this.users = (await axios.get('api/get-users/')).data
this.users2 = (await axios.post('api/get-users/')).data

С этим плагином для vue можно делать все что на обычном axios но в удобном для vue виде.

READ ALSO
Слайдер в аккордионе

Слайдер в аккордионе

Имеется аккордион и в нем slick слайдерПервый элемент раскрыт при загрузке, остальные скрыты

178
Сделать цикл с перебором из переменной

Сделать цикл с перебором из переменной

Есть две переменнойПервая i=31; Вторая i2='2 4 5 8 9'; Как вывести цифры от 1 до 31, но без цифр указанных во второй переменной?

161
Vuex вынесение в геттеры

Vuex вынесение в геттеры

Всем привет,не получается вынести в геттеры небольшой функционал,подскажите как правильно это сделать Вот такая функция в компоненте

164
Owl courusel и табы при загрузке страницы

Owl courusel и табы при загрузке страницы

При переключении между табами, в которых есть слайдер на долю секунды показываются все слайдыМожет кто сталкивался с проблемой, как фиксить?

142