Где хранить access token для API?

Question

[denop]

Приветствую!
Реализовал API для подтягивания (предыдущих)данных формы при входе на страницу.
Но столкнулся с несколькими моментами:
1. В Headers не отображается Authorization : Bearer (возможно не там смотрю. и должен ли быть?)
2. Где лучше хранить access token для Vue.js? (сетил в Cookies, но не выходит оттуда их достать при httpOnly)

"Если куки имеет настройку httpOnly, то document.cookie не видит его, поэтому такое куки защищено."

Посоветуйте как быть?
Заранее благодарю!

Comments

[Сергей delphinpro]

Например, в LocalStorage https://github.com/delphinpro/wofh-tools/blob/mast...

Answer 1

[Vfreelance]

с просторов интернета:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // assume your access token is stored in local storage 
    // (it should really be somewhere more secure but I digress for simplicity)
    let token = localStorage.getItem('access_token')
    if (token) {
       config.headers['Authorization'] = `Bearer ${token}`
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

и еще:

To give a better answer to this thread, I did the following:

In my layouts app file I added:

<script>
    window.App = {!! json_encode([
        'apiToken' => Auth::user()->api_token,
    ]) !!};
</script>
    

and in my bootstrap.js I added:

axios.defaults.headers.common = {
  'X-Requested-With': 'XMLHttpRequest',
  'Authorization': 'Bearer ' + App.apiToken,
};

With this I always send the api_token with the logged in user when ever I make a request with Axios. Probably not the best way to go about it, and one should probably use Passport for this.

Answer 2

[Игорь]

localStorage
Cookie