我注销时在黑名单上收到400个错误的请求

问题描述

使用logout调用 django-rest-framework-simplejwt函数时，我试图将用户列入黑名单。我可以从页面注销，但是在终端中我不断收到400错误的请求。我相信令牌尚未销毁，而且在我的APIview中，我得到了"detail": "Method \"GET\" not allowed."。你能发现我的错误吗？

[更新]

终端错误

Bad Request: /blacklist/
[21/Aug/2020 10:06:24] "POST /blacklist/ HTTP/1.1" 400 0

settings.py

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',),'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',)
}
SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),'REFRESH_TOKEN_LIFETIME': timedelta(days=14),'ROTATE_REFRESH_TOKENS': True,'BLACKLIST_AFTER_ROTATION': True,'ALGORITHM': 'HS256','SIGNING_KEY': SECRET_KEY,'VERIFYING_KEY': None,'AUTH_HEADER_TYPES': ('JWT','USER_ID_FIELD': 'id','USER_ID_CLaim': 'user_id','AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.Accesstoken','TOKEN_TYPE_CLaim': 'token_type',}

views.py

class logoutAndBlacklistRefreshToken(APIView):
    permission_classes = (AllowAny,)
    authentication_classes = ()

    def post(self,request):
        try:
            refresh_token = request.data["refresh_token"]
            token = RefreshToken(refresh_token)
            token.blacklist()

            return Response(status=status.HTTP_205_RESET_CONTENT)
        except Exception as e:
            return Response(status=status.HTTP_400_BAD_REQUEST)

urls.py

urlpatterns = [
    path('',include(router.urls)),path('admin/',admin.site.urls),path(
        'blacklist/',logoutAndBlacklistRefreshToken.as_view(),name="blacklist"
    ),path('api-auth/',include('rest_framework.urls')),path(
        'api-token/',TokenObtainPairView.as_view(),name='token-obtain'
    ),path(
        'api-token-refresh/',TokenRefreshView.as_view(),name='token-refresh'
   ),path(
        'api-token-verify',TokenVerifyView.as_view(),name='token-verify'
    ),]

axios-base.js

import axios from "axios";
import store from "../store/index";
// API URL
const ApiUrl = "http://localhost:8000";

const axiosBase = axios.create({
  baseURL: ApiUrl,headers: { ContentType: "application/json" },});

const getAPI = axios.create({
  baseURL: ApiUrl,});

getAPI.interceptors.response.use(undefined,function(err) {
  // if error response status is 401,it means the request was
  // invalid due to expired access token.
  if (err.config && err.response && err.response.status === 401) {
    // attempt to obtain new access token by running
    // 'refreshToken' action
    store
      .dispatch("refreshToken")
      .then((access) => {
        // if succesfull resend the request to get the data from server
        axios
          .request({
            baseURL: ApiUrl,method: "get",headers: { Authorization: `Bearer ${access}` },url: "/",})
          .then((response) => {
            // if successfully received the data store it in store.state.
            // APIData so that 'Downloads' component can grab the
            // data from it and display to the client.
            console.log("Success");
            store.state.APIData = response.data;
          })
          .catch((err) => {
            console.log("Got error while access token");
            return Promise.reject(err);
          });
      })
      .catch((err) => {
        return Promise.reject(err);
      });
  }
});

export { axiosBase,getAPI };

Vuex商店

import Vue from "vue";
import Vuex from "vuex";
import { axiosBase } from "../api/axios-base";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    accesstoken: localStorage.getItem("access_token") || null,// makes sure the user is logged in even after
    // refreshing the page
    refreshToken: localStorage.getItem("refresh_token") || null,APIData: "",// received data from the backend API is stored here.
  },getters: {
    loggedIn(state) {
      return state.accesstoken != null;
    },},mutations: {
    updateLocalStorage(state,{ access,refresh }) {
      localStorage.setItem("access_token",access);
      localStorage.setItem("refresh_token",refresh);
      state.accesstoken = access;
      state.refreshToken = refresh;
    },updateAccess(state,access) {
      state.accesstoken = access;
    },destroyToken(state) {
      state.accesstoken = null;
      state.refreshToken = null;
    },actions: {
    // run the below action to get a new access token on expiration
    refreshToken(context) {
      return new Promise((resolve,reject) => {
        axiosBase
          .post("/api-token-refresh/",{
            refresh: context.state.refreshToken,}) // send the stored refresh token to the backend API
          .then((response) => {
            // if API sends back new access and refresh token update the store
            console.log("New access successfully generated");
            context.commit("updateAccess",response.data.access);
            resolve(response.data.access);
          })
          .catch((err) => {
            console.log("error in refreshToken Task");
            reject(err); // error generating new access and refresh token because refresh token has expired
          });
      });
    },logoutUser(context) {
      if (context.getters.loggedIn) {
        return new Promise((resolve) => {
          axiosBase
            .post("/blacklist/")
            .then((response) => {
              localStorage.removeItem("access_token");
              localStorage.removeItem("refresh_token");
              context.commit("destroyToken");
              resolve(response);
            })
            .catch((err) => {
              localStorage.removeItem("access_token");
              localStorage.removeItem("refresh_token");
              context.commit("destroyToken");
              resolve(err);
            });
        });
      }
    },});

logout.vue

<template>
  <div>
    <h3>Log out page</h3>
    <v-btn small color="success" class="mr-2 mb-5" @click="logout">
      log out
    </v-btn>
  </div>
</template>

<script>
export default {
  name: "logout",methods: {
    logout() {
      this.$store.dispatch("logoutUser").then(() => {
        this.$router.push({ name: "Home" });
      });
    },};
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）