Почему не получается авторизоваться до тех пор пока не сделаю CTRL + F5?

Question

[Mike]

На главной странице есть три ссылки "Home" "Blog" and "Sign in" и кнопка logout.
Ссылка "Blog" работает только для авторизованного юзера. Вот егo:
app/views.py

from rest_framework import viewsets
from rest_framework.permissions import IsAuthenticated 
from . models import Post
from . serializers import PostSerializer

class PostViewset(viewsets.ModelViewSet):

    permission_classes = (IsAuthenticated,) # только для авторизованного юзера
    queryset = Post.objects.all()
    serializer_class = PostSerializer

Во vue.js я логинюсь и получаю токен(JWT) и храню его в localsorage. Вот login.vue:

<script>
import axios from 'axios'
export default {
    name: 'login',
    data() {
        return {
            endpoint: 'http://localhost:8000/rest-auth/login/',
            username: '',
            password: ''
        }
    },
    methods: {
        login() {
            axios.post(this.endpoint, {username:  username, password: this.password})
            .then(response => {
                const token = response.data.token
                localStorage.setItem('user-token', token)
                console.log(response)
                this.$router.push({name: 'home'})
            })
        }
    }
}
</script>

И в компоненте где все посты моего "Blog". Я передаю токен таким вот образом:

<script>

import axios from 'axios'

export default {
    name: "Blog",
    data() {
        return {
            endpoint: 'http://localhost:8000/api/app/',
            posts: []
        };
    },
    methods: {
        getAllPosts() {
            axios.defaults.headers.common['Authorization'] = 'JWT ' + localStorage.getItem('user-token');
             axios.get(this.endpoint).then(Response => {
                 this.posts = Response.data
            })
        }
    },
    created() {
        this.getAllPosts()
    }
};
</script>

Это всё работает, авторизованный юзер может читать посты, также можно выйти и залогиниться обратно. Но есть проблема. Когда юзер жмякает на кнопку logout(выходит из системы) и пробует пройтись по ссылке "Blog"(только для авторизованного юзера) в консоле браузера получаю "GET localhost:8000/rest-auth/login 401 (Unauthorized)", в принципе это нормально, так и должно быть. Теперь если попробовать авторизоваться то получаю POST localhost:8000/rest-auth/login 401 (Unauthorized) до тех пор пока не нажму "ctrl + f5" и только потом можно успешно залогиниться. Если после logout не жмякать на ссылку "Blog" а пройтись по ссылке "Home" где нет ограничений никаких и затем попробовать залогинится то всё получается великолепно и даже без "ctrl + f5.

Если переписать чуть чуть компонент "Blog" а именно функцию getAllPosts() таким вот образом:

axios.get(this.endpoint, {headers: {'Authorization': 'JWT ' + localStorage.getItem('user-token')}}).then(Response => {
                 this.posts = Response.data
             })

то проблема исчезает.
Как мне правильно передавать токен так чтоб не писать каждый раз в заголовках этого.?

Answer 1

[levchak0910]

Позвольте познакомить Вас с интерцепторами)
В Вашем случае

axios.interceptors.request.use(function (config) {
    const userToken = localStorage.getItem('user-token');
    if(userToken) config.headers["Authorization"] = `JWT ${userToken}`;
    return config;
});

Используйте vue-axios, чтобы не импортировать axios каждый раз