Всем привет,у меня вот такая проблема,не получается сохранить токен в заголовке Приходится вот так постоянно его задавать,но так не должно быть
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,
};
Можете указать 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 виде.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Имеется аккордион и в нем slick слайдерПервый элемент раскрыт при загрузке, остальные скрыты
Есть две переменнойПервая i=31; Вторая i2='2 4 5 8 9'; Как вывести цифры от 1 до 31, но без цифр указанных во второй переменной?
Всем привет,не получается вынести в геттеры небольшой функционал,подскажите как правильно это сделать Вот такая функция в компоненте
При переключении между табами, в которых есть слайдер на долю секунды показываются все слайдыМожет кто сталкивался с проблемой, как фиксить?