title: failed to configure axios with django rest auth to login and get auth token
body: <p>I tried these codes:</p>
  <h1>src/api/auth.js</h1>
  <pre><code>import session from &quot;./session&quot;;
  
  export default {
    login(Username, Password) {
      return session.post(&quot;/auth/login/&quot;, { Username, Password });
    },
    logout() {
      return session.post(&quot;/auth/logout/&quot;, {});
    },
    createAccount(username, password1, password2, email) {
      return session.post(&quot;/registration/&quot;, {
        username,
        password1,
        password2,
        email
      });
    },
    changeAccountPassword(password1, password2) {
      return session.post(&quot;/auth/password/change/&quot;, { password1, password2 });
    },
    sendAccountPasswordResetEmail(email) {
      return session.post(&quot;/auth/password/reset/&quot;, { email });
    },
    resetAccountPassword(uid, token, new_password1, new_password2) {
      // eslint-disable-line camelcase
      return session.post(&quot;/auth/password/reset/confirm/&quot;, {
        uid,
        token,
        new_password1,
        new_password2
      });
    },
    getAccountDetails() {
      return session.get(&quot;/auth/user/&quot;);
    },
    updateAccountDetails(data) {
      return session.patch(&quot;/auth/user/&quot;, data);
    },
    verifyAccountEmail(key) {
      return session.post(&quot;/registration/verify-email/&quot;, { key });
    }
  };
  </code></pre>
  <h1>src/session.js</h1>
  <pre><code>import axios from &quot;axios&quot;;
  
  const CSRF_COOKIE_NAME = &quot;csrftoken&quot;;
  const CSRF_HEADER_NAME = &quot;X-CSRFToken&quot;;
  
  const session = axios.create({
    xsrfCookieName: CSRF_COOKIE_NAME,
    xsrfHeaderName: CSRF_HEADER_NAME
  });
  
  export default session;
  </code></pre>
  <h1>src/store/auth.js</h1>
  <pre><code>import auth from &quot;../api/auth&quot;;
  import session from &quot;../api/session&quot;;
  import {
    LOGIN_BEGIN,
    LOGIN_FAILURE,
    LOGIN_SUCCESS,
    LOGOUT,
    REMOVE_TOKEN,
    SET_TOKEN
  } from &quot;./types&quot;;
  
  const TOKEN_STORAGE_KEY = &quot;TOKEN_STORAGE_KEY&quot;;
  
  const initialState = {
    authenticating: false,
    error: false,
    token: null
  };
  
  const getters = {
    isAuthenticated: state =&gt; !!state.token
  };
  
  const actions = {
    login({ commit }, { username, password }) {
      commit(LOGIN_BEGIN);
      return auth
        .login(username, password)
        .then(({ data }) =&gt; commit(SET_TOKEN, data.key))
        .then(() =&gt; commit(LOGIN_SUCCESS))
        .catch(() =&gt; commit(LOGIN_FAILURE));
    },
    logout({ commit }) {
      return auth
        .logout()
        .then(() =&gt; commit(LOGOUT))
        .finally(() =&gt; commit(REMOVE_TOKEN));
    },
    initialize({ commit }) {
      const token = localStorage.getItem(TOKEN_STORAGE_KEY);
  
      if (token) {
        commit(SET_TOKEN, token);
      } else {
        commit(REMOVE_TOKEN);
      }
    }
  };
  
  const mutations = {
    [LOGIN_BEGIN](state) {
      state.authenticating = true;
      state.error = false;
    },
    [LOGIN_FAILURE](state) {
      state.authenticating = false;
      state.error = true;
    },
    [LOGIN_SUCCESS](state) {
      state.authenticating = false;
      state.error = false;
    },
    [LOGOUT](state) {
      state.authenticating = false;
      state.error = false;
    },
    [SET_TOKEN](state, token) {
      localStorage.setItem(TOKEN_STORAGE_KEY, token);
      session.defaults.headers.Authorization = `Token ${token}`;
      state.token = token;
    },
    [REMOVE_TOKEN](state) {
      localStorage.removeItem(TOKEN_STORAGE_KEY);
      delete session.defaults.headers.Authorization;
      state.token = null;
    }
  };
  
  export default {
    namespaced: true,
    state: initialState,
    getters,
    actions,
    mutations
  };
  </code></pre>
  <h1>src/views/Login.vue</h1>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;form class=&quot;login&quot; @submit.prevent=&quot;login&quot;&gt;
        &lt;h1&gt;Sign in&lt;/h1&gt;
        &lt;label&gt;Username&lt;/label&gt;
        &lt;input required v-model=&quot;Username&quot; type=&quot;text&quot; placeholder=&quot;Name&quot; /&gt;
        &lt;label&gt;Password&lt;/label&gt;
        &lt;input
          required
          v-model=&quot;Password&quot;
          type=&quot;password&quot;
          placeholder=&quot;Password&quot;
        /&gt;
        &lt;hr /&gt;
        &lt;button type=&quot;submit&quot;&gt;Login&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import axios from &quot;axios&quot;;
  export default {
    data() {
      return {
        Username: &quot;&quot;,
        Password: &quot;&quot;
      };
    },
    methods: {
      /*login() {
        let Username = this.Username;
        let Password = this.Password;
        this.$store
          .dispatch(&quot;auth/login&quot;, { Username, Password })
          .then(() =&gt; this.$router.push(&quot;/&quot;))
          .catch(err =&gt; console.log(err));*/
      login({ Username, Password }) {
        const API_URL = &quot;http://127.0.0.1:8000&quot;;
        const url = `${API_URL}/auth/login/`;
        return axios
          .post(url, { Username, Password })
          .then(() =&gt; this.$router.push(&quot;/&quot;))
          .catch(err =&gt; console.log(err));
      }
    },
    mounted() {
      this.login();
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>first, I tried using the auth service but the failure was OPTIONS not POST.
  then i used axios directly to post user and get token, but then the failure was method not allowed, I do not know what is the hidden process, can you explain please?</p>
  <h1>app.vue</h1>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;navbar v-if=&quot;isAuthenticated&quot;&gt;&lt;/navbar&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters } from &quot;vuex&quot;;
  
  import Navbar from &quot;./components/Navbar&quot;;
  
  export default {
    name: &quot;app&quot;,
    components: {
      Navbar
    },
    computed: mapGetters(&quot;auth&quot;, [&quot;isAuthenticated&quot;])
  };
  &lt;/script&gt;
  </code></pre>
  <h1>router.js</h1>
  <pre><code>import Vue from &quot;vue&quot;;
  import Router from &quot;vue-router&quot;;
  import About from &quot;./views/About&quot;;
  import Home from &quot;./views/Home&quot;;
  import Login from &quot;./views/Login&quot;;
  import Lost from &quot;./views/Lost&quot;;
  import PasswordReset from &quot;./views/PasswordReset&quot;;
  import PasswordResetConfirm from &quot;./views/PasswordResetConfirm&quot;;
  import Register from &quot;./views/Register&quot;;
  import VerifyEmail from &quot;./views/VerifyEmail&quot;;
  
  import store from &quot;./store/index&quot;;
  
  const requireAuthenticated = (to, from, next) =&gt; {
    store.dispatch(&quot;auth/initialize&quot;).then(() =&gt; {
      if (!store.getters[&quot;auth/isAuthenticated&quot;]) {
        next(&quot;/login&quot;);
      } else {
        next();
      }
    });
  };
  
  const requireUnauthenticated = (to, from, next) =&gt; {
    store.dispatch(&quot;auth/initialize&quot;).then(() =&gt; {
      if (store.getters[&quot;auth/isAuthenticated&quot;]) {
        next(&quot;/home&quot;);
      } else {
        next();
      }
    });
  };
  
  const redirectLogout = (to, from, next) =&gt; {
    store.dispatch(&quot;auth/logout&quot;).then(() =&gt; next(&quot;/login&quot;));
  };
  
  Vue.use(Router);
  
  export default new Router({
    saveScrollPosition: true,
    routes: [
      {
        path: &quot;/&quot;,
        redirect: &quot;/home&quot;
      },
      {
        path: &quot;/about&quot;,
        component: About,
        beforeEnter: requireAuthenticated
      },
      {
        path: &quot;/home&quot;,
        component: Home,
        beforeEnter: requireAuthenticated
      },
      {
        path: &quot;/password_reset&quot;,
        component: PasswordReset
      },
      {
        path: &quot;/password_reset/:uid/:token&quot;,
        component: PasswordResetConfirm
      },
      {
        path: &quot;/register&quot;,
        component: Register
      },
      {
        path: &quot;/register/:key&quot;,
        component: VerifyEmail
      },
      {
        path: &quot;/login&quot;,
        component: Login,
        beforeEnter: requireUnauthenticated
      },
      {
        path: &quot;/logout&quot;,
        beforeEnter: redirectLogout
      },
      {
        path: &quot;*&quot;,
        component: Lost
      }
    ]
  });
  </code></pre>
  <h1>main.js</h1>
  <pre><code>import Vue from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  import store from &quot;./store/index&quot;;
  import axios from &quot;axios&quot;;
  import Axios from &quot;axios&quot;;
  import VueAxios from &quot;vue-axios&quot;;
  import Vuex from &quot;vuex&quot;;
  
  Vue.use(Vuex);
  Vue.use(VueAxios, axios);
  //Vue.config.productionTip = false;
  Vue.prototype.$http = Axios;
  const token = localStorage.getItem(&quot;token&quot;);
  if (token) {
    Vue.prototype.$http.defaults.headers.common[&quot;Authorization&quot;] = token;
  }
  
  new Vue({
    router,
    store,
    render: h =&gt; h(App)
  }).$mount(&quot;#app&quot;);
  </code></pre>
  <p>references:</p>
  <pre><code>https://www.techiediaries.com/vue-axios-tutorial/
  https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex
  https://github.com/jakemcdermott/vue-django-rest-auth
  </code></pre>