Как передать токен в запросе к API?

Question

[Алексей]

Требуется получить данные от сервера по API
На моменте авторизации мне возвращается токен, который сейчас сохранен в localstorage.
Как его передать в GET запрос для получения данных ?

<template>
    <div class="lk">
        <h2>Личный кабинет сотрудника</h2>
        {{posts}}
    </div>
</template>
<script>
import {mapState} from "vuex";

    export default{
    name: 'lk',
    data(){
        return{
            'posts': [] 
        }
    },
    async mounted() {
        let lk = await fetch('http://10.1.5.65/api/personal/users/');
        let posts = await lk.json();
        this.posts = posts
    },
    computed: {
        ...mapState({
        user: state => state.user
        })
    }
}
    </script>

import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  state: {
    user: {}
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
  },
  plugins: [createPersistedState()],
})

export default store

Answer 1

[Владимир Коротенко]

Прочтите инструкцию к API
обычно отправляют токен либо в заголовках либо в куках.
Вот пример добавления в проект vue

import axios from 'axios'

export function jwtInterceptor () {
  axios.interceptors.request.use(request => {
    
    const token = window.localStorage.getItem('token')
  
    if (token && token !== null) {
      request.headers.common.Authorization = `Bearer ${token}`
    }

    return request
  })
}

Comments

[Алексей]

Да, знаю что нужно в headers передать, но это не выходит

В данный момент авторизация реализована и токен сохраняется, но я хочу чтобы при дальнейших манипуляциях с сервисом от пользователя на запрос данных в таблицах запрашивался токен сохраненный в localstorage

[Владимир Коротенко]

Алексей, Вы не увидели этой строки?
const token = window.localStorage.getItem('token')

[Алексей]

Владимир Коротенко, Видел, не совсем понял как это использовать у меня, так как если обратиться к свойству computed. он мне возвращает это значение, но как его забрать вопрос

[k-iluschenko]

Алексей, думаю как-то так должно сработать

const token = window.localStorage.getItem('token')

// или
// const {token} = this.user
fetch('https://example.com', {
  headers: {
    'Authorization': `Bearer ${token}`
  },
})