Невозможно получить доступ к токену с помощью axios и djangorestframework-jwt - PullRequest
Новая
       92

Невозможно получить доступ к токену с помощью axios и djangorestframework-jwt

0 голосов
/ 12 ноября 2018

Я пытаюсь создать приложение, в котором серверы api работают через django rest framework, а внешний интерфейс выполняется в vue.js2.

Я имею в виду этот блог , чтобы помочь мне аутентифицировать jwt через axios. Я также попробовал этот , когда я не мог заставить первый работать правильно

Вот мой файл settings.py 

INSTALLED_APPS = [
    ...
    'rest_framework',
    'rest_framework.authtoken',
    'admindash',
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAdminUser',
    ),
    'TEST_REQUEST_RENDERER_CLASSES': (
        'rest_framework.renderers.MultiPartRenderer',
        'rest_framework.renderers.JSONRenderer',
        'rest_framework.renderers.TemplateHTMLRenderer'
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ),
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 20,
}

JWT_AUTH = {
    'JWT_ALLOW_REFRESH': True,
    'JWT_EXPIRATION_DELTA': timedelta(hours=1),
    'JWT_REFRESH_EXPIRATION_DELTA': timedelta(days=7),
}

#Cors origin
CORS_ORIGIN_WHITELIST = (
    'localhost:8080'
)
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

Вот мой магазин Vue 

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

export default new Vuex.Store({
  state: {
    authUser: {},
    isAuthenticated: false,
    jwt: localStorage.getItem('token'),
    endpoints: {
      obtainJWT: 'http://127.0.0.1:8000/api/v1/auth/obtain_token/',
      refreshJWT: 'http://127.0.0.1:8000/api/v1/auth/refresh_token/',
      baseUrl: 'http://127.0.0.1:8000/api/v1'
    }
  },

  mutations: {
    setAuthUser(state, {
      authUser,
      isAuthenticated
    }) {
      Vue.set(state, 'authUser', authUser)
      Vue.set(state, 'isAuthenticated', isAuthenticated)
    },
    updateToken(state, newToken) {
      localStorage.setItem('token', newToken);
      state.jwt = newToken;
    },
    removeToken(state) {
      localStorage.removeItem('token');
      state.jwt = null;
    }
  },

  actions: {
    obtainToken(context, {username, password}) {
      const payload = {
        username: username,
        password: password
      }
      const headers= {
        'Content-Type': 'application/json'
      }

      axios.post(this.state.endpoints.obtainJWT, headers, payload)
        .then((response) => {
          this.commit('updateToken', response.data.token);
          console.log(this.state.jwt);
        })
        .catch((error) => {
          console.log(error);
        })
    },

    refreshToken () {
      const payload = {
        token: this.state.jwt
      }

      axios.post(this.state.endpoints.refreshJWT, payload)
        .then((response) => {
          this.commit('updateToken', response.data.token);
          console.log(this.state.jwt)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
})

и вот login.vue 

<script>
import axios from 'axios'
import FormInput from './FormInput'

export default {
  name: 'Login',
  components: {
    FormInput
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    /* ...mapState([
      'jwt',
      'endpoints'
    ]) */
  },
  methods: {
    /* ...mapActions([
      'obtainToken'
    ]), */

    authenticateBeforeSubmit () {
      this.$store.dispatch('obtainToken', {
        username: this.username,
        password: this.password
      }).then(() => {
        this.$router.push('/')
      }).catch((error) => {
        console.log(error)
      })

      /* const payload = {
        username: this.username,
        password: this.password
      }
      axios.post(this.$store.state.endpoints.obtainJWT, payload)
        .then((response) => {
          this.$store.commit('updateToken', response.data.token)
          console.log(this.$store.state.jwt);
          const base = {
            baseUrl: this.$store.state.endpoints.baseUrl,
            headers: {
              Authorization: `JWT ${this.$store.state.jwt}`,
              'Content-Type': 'application/json'
            },
            xhrFields: {
              withCredentials: true
            }
          }

          const axiosInstance = axios.create(base)
          axiosInstance({
            url: "/user/",
            method: "get",
            params: {}
          })
            .then((response) => {
              this.$store.commit("setAuthUser", 
              {authUser: response.data, isAuthenticated: true}
              )
              this.$router.push({name: 'Home'})
            })
        })
        .catch((error) => {
          console.log(error);
          console.debug(error);
          console.dir(error);
        }) */
    }
  }
}
</script>

Теперь проблема в том, что я получаю две ошибки

  1. Так же, как я загружаю представление входа в систему в браузере, я получаю эту ошибку

    Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'protocol' undefined в isURLSameOrigin (VM34519 isURLSameOrigin.js: 57) при отправке XhrRequest (VM34513 xhr.js: 109) на новом Promise () в xhrAdapter (VM34513 xhr.js: 12) на dispatchRequest (VM34521 dispatchRequest.js: 59) isURLSameOrigin @ VM34519 isURLSameOrigin.js: 57 dispatchXhrRequest @ VM34513 xhr.js: 109 xhrAdapter @ VM34513 xhr.js: 12 dispatchRequest @ VM34521 dispatchRequest.js: 59 18: 29: 09,976

Понятия не имею, о чем эта ошибка, я искал ее и не нашел ничего, что работает

  1. Это я получаю, когда нажимаю на кнопку submit, которая запускает метод authenticateBeforeSubmit

    Uncaught TypeError: Невозможно прочитать свойство 'dispatch' из неопределенного в VueComponent.authenticateBeforeSubmit (VM34576 Login.vue: 68) в invoker (VM34494 vue.esm.js: 2026) в HTMLButtonElement.fn._withTask.fn._withTask (VM34494 vue.esm.js: 1825) authenticateBeforeSubmit @ VM34576 Login.vue: 68 invoker @ VM34494 vue.esm.js: 2026 fn._withTask.fn._withTask @ VM34494 vue.esm.js: 1825 18: 29: 30,912

То, что я понимаю, говорит, что я неправильно вызываю диспетчеризацию действия, но я не понимаю, как заставить это работать

Когда я нажимаю, отправляю "перенаправления" на 

http://127.0.0.1:8080/login?username=f1uk3r&password=thisissparta

но он не получает токен

Я протестировал токен, используя 

curl -X POST -H "Content-Type: application/json" -d '{"username":"f1uk3r","password":"thisissparta"}' http://127.0.0.1:8000/api/v1/auth/obtain_token/

и это дает мне маркер, так что я не думаю, что в части django не должно быть никаких проблем. Что я делаю не так, как я могу это исправить.

1 Ответ

0 голосов
/ 13 ноября 2018

Я понял это, поэтому отвечаю на будущее и, если кто-нибудь еще посчитает это полезным

  1. TypeError: Невозможно прочитать свойство 'protocol' undefined в isURLSameOrigin

это можно решить путем правильного импорта axios и VueAxios

Я инициализировал это так 

import Vue from 'vue'
import VueAxios from 'vue-axios'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);
Vue.use(axios, VueAxios);

В то время как это должно было быть инициализировано как это 

import Vue from 'vue'
import VueAxios from 'vue-axios'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);
Vue.use(VueAxios, axios);
  1. Невозможно прочитать свойство 'dispatch' из неопределенного в VueComponent

Опять же, я не правильно инициализировал хранилище, поэтому я создал каталог в каталоге «src» с именем «store», и в этом каталоге я создал файл с именем «store.js»

Затем в main.js импортируем хранилище и инициализируем в экземпляре 

import store from './store/store.js';


Vue.use(VeeValidate);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...