failed to configure axios with django rest auth to login and get auth token - vue.js

Question

I tried these codes:
src/api/auth.js
import session from "./session";
export default {
login(Username, Password) {
return session.post("/auth/login/", { Username, Password });
},
logout() {
return session.post("/auth/logout/", {});
},
createAccount(username, password1, password2, email) {
return session.post("/registration/", {
username,
password1,
password2,
email
});
},
changeAccountPassword(password1, password2) {
return session.post("/auth/password/change/", { password1, password2 });
},
sendAccountPasswordResetEmail(email) {
return session.post("/auth/password/reset/", { email });
},
resetAccountPassword(uid, token, new_password1, new_password2) {
// eslint-disable-line camelcase
return session.post("/auth/password/reset/confirm/", {
uid,
token,
new_password1,
new_password2
});
},
getAccountDetails() {
return session.get("/auth/user/");
},
updateAccountDetails(data) {
return session.patch("/auth/user/", data);
},
verifyAccountEmail(key) {
return session.post("/registration/verify-email/", { key });
}
};
src/session.js
import axios from "axios";
const CSRF_COOKIE_NAME = "csrftoken";
const CSRF_HEADER_NAME = "X-CSRFToken";
const session = axios.create({
xsrfCookieName: CSRF_COOKIE_NAME,
xsrfHeaderName: CSRF_HEADER_NAME
});
export default session;
src/store/auth.js
import auth from "../api/auth";
import session from "../api/session";
import {
LOGIN_BEGIN,
LOGIN_FAILURE,
LOGIN_SUCCESS,
LOGOUT,
REMOVE_TOKEN,
SET_TOKEN
} from "./types";
const TOKEN_STORAGE_KEY = "TOKEN_STORAGE_KEY";
const initialState = {
authenticating: false,
error: false,
token: null
};
const getters = {
isAuthenticated: state => !!state.token
};
const actions = {
login({ commit }, { username, password }) {
commit(LOGIN_BEGIN);
return auth
.login(username, password)
.then(({ data }) => commit(SET_TOKEN, data.key))
.then(() => commit(LOGIN_SUCCESS))
.catch(() => commit(LOGIN_FAILURE));
},
logout({ commit }) {
return auth
.logout()
.then(() => commit(LOGOUT))
.finally(() => 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
};
src/views/Login.vue
<template>
<div>
<form class="login" #submit.prevent="login">
<h1>Sign in</h1>
<label>Username</label>
<input required v-model="Username" type="text" placeholder="Name" />
<label>Password</label>
<input
required
v-model="Password"
type="password"
placeholder="Password"
/>
<hr />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
Username: "",
Password: ""
};
},
methods: {
/*login() {
let Username = this.Username;
let Password = this.Password;
this.$store
.dispatch("auth/login", { Username, Password })
.then(() => this.$router.push("/"))
.catch(err => console.log(err));*/
login({ Username, Password }) {
const API_URL = "http://127.0.0.1:8000";
const url = `${API_URL}/auth/login/`;
return axios
.post(url, { Username, Password })
.then(() => this.$router.push("/"))
.catch(err => console.log(err));
}
},
mounted() {
this.login();
}
};
</script>
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?
app.vue
<template>
<div id="app">
<navbar v-if="isAuthenticated"></navbar>
<router-view></router-view>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import Navbar from "./components/Navbar";
export default {
name: "app",
components: {
Navbar
},
computed: mapGetters("auth", ["isAuthenticated"])
};
</script>
router.js
import Vue from "vue";
import Router from "vue-router";
import About from "./views/About";
import Home from "./views/Home";
import Login from "./views/Login";
import Lost from "./views/Lost";
import PasswordReset from "./views/PasswordReset";
import PasswordResetConfirm from "./views/PasswordResetConfirm";
import Register from "./views/Register";
import VerifyEmail from "./views/VerifyEmail";
import store from "./store/index";
const requireAuthenticated = (to, from, next) => {
store.dispatch("auth/initialize").then(() => {
if (!store.getters["auth/isAuthenticated"]) {
next("/login");
} else {
next();
}
});
};
const requireUnauthenticated = (to, from, next) => {
store.dispatch("auth/initialize").then(() => {
if (store.getters["auth/isAuthenticated"]) {
next("/home");
} else {
next();
}
});
};
const redirectLogout = (to, from, next) => {
store.dispatch("auth/logout").then(() => next("/login"));
};
Vue.use(Router);
export default new Router({
saveScrollPosition: true,
routes: [
{
path: "/",
redirect: "/home"
},
{
path: "/about",
component: About,
beforeEnter: requireAuthenticated
},
{
path: "/home",
component: Home,
beforeEnter: requireAuthenticated
},
{
path: "/password_reset",
component: PasswordReset
},
{
path: "/password_reset/:uid/:token",
component: PasswordResetConfirm
},
{
path: "/register",
component: Register
},
{
path: "/register/:key",
component: VerifyEmail
},
{
path: "/login",
component: Login,
beforeEnter: requireUnauthenticated
},
{
path: "/logout",
beforeEnter: redirectLogout
},
{
path: "*",
component: Lost
}
]
});
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";
import axios from "axios";
import Axios from "axios";
import VueAxios from "vue-axios";
import Vuex from "vuex";
Vue.use(Vuex);
Vue.use(VueAxios, axios);
//Vue.config.productionTip = false;
Vue.prototype.$http = Axios;
const token = localStorage.getItem("token");
if (token) {
Vue.prototype.$http.defaults.headers.common["Authorization"] = token;
}
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
references:
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

Answer 1

Most likely CORS issues.
If you're serving the vue server on different port then the django server, then you need to set the proper CORS settings.
Please refer to https://github.com/ottoyiu/django-cors-headers/

Answer 2

while it seems my code is little ugly because I mixed bunch of repositories, but at least I made it make POST successfully. I used
npm install qs
then import it, then:
var username = payload.credential.username;
var password = payload.credential.password;
then editing
axios.post(url, qs.stringify({ username, password })
and it worked.