跟随教程开发遇/api/v1/token/logout/ 403禁止访问错误求助

跟随教程开发时，调用/api/v1/token/logout/接口返回403 Forbidden错误，无法定位MyAccountView.vue中的问题，尝试改用re_path也无效。预期成功调用后跳转到网站首页/。

报错信息 #

Forbidden: /api/v1/token/logout/
[16/Oct/2023 19:01:35] "POST /api/v1/token/logout/ HTTP/1.1" 403 58

相关代码 #

urls.py #

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('djoser.urls')),
    path('api/v1/', include('djoser.urls.authtoken'))
]

settings.py #

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSESS':(
        'rest_framework.authentication.TokenAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSESS':(
        'rest_framework.permissions.IsAuthenticated',
    )
}

MyAccountView.vue 的 logout 方法 #

methods: {
        logout() {
            axios
                .post("/api/v1/token/logout/")
                .then(response => {
                    axios.defaults.headers.common["Authorization"] = ""

                    localStorage.removeItem("token")

                    this.$store.commit('removeToken')

                    this.$router.push('/')
                })
                .catch(error => {
                    if (error.response) {
                        console.log(JSON.stringify(error.response.data))
                    } else if (error.message) {
                        console.log(JSON.stringify(error.message))
                    } else {
                        console.log(JSON.stringify(error))
                    }
                })
        }
    }

问题解决 #

1. 修正配置项拼写错误
   settings.py里的DEFAULT_AUTHENTICATION_CLASSES和DEFAULT_PERMISSION_CLASSES被多写了一个s，变成了CLASSESS。Django无法识别这些错误配置，导致Token认证未生效，接口返回403。修正后的配置：

   REST_FRAMEWORK = {
       'DEFAULT_AUTHENTICATION_CLASSES':(
           'rest_framework.authentication.TokenAuthentication',
       ),
       'DEFAULT_PERMISSION_CLASSES':(
           'rest_framework.permissions.IsAuthenticated',
       )
   }
   

2. 确保请求携带Token
   当前logout方法的请求没有显式携带Token，需要确认请求头中存在Authorization: Token <token值>。可以修改代码显式添加：

   logout() {
       const token = localStorage.getItem("token")
       axios
           .post("/api/v1/token/logout/", {}, {
               headers: {
                   'Authorization': `Token ${token}`
               }
           })
           .then(response => {
               axios.defaults.headers.common["Authorization"] = ""
               localStorage.removeItem("token")
               this.$store.commit('removeToken')
               this.$router.push('/')
           })
           .catch(error => {
               if (error.response) {
                   console.log(JSON.stringify(error.response.data))
               } else if (error.message) {
                   console.log(JSON.stringify(error.message))
               } else {
                   console.log(JSON.stringify(error))
               }
           })
   }
   

内容的提问来源于stack exchange，提问作者november