djoserとvuexでログインをしてみる。　（メモ）

DRFとVueを用いてログインの実装を行なったので、そのときの事をメモしておこうと思います。

まずは、djoserの設定。

settings.pythonとurls.pyを以下のように設定します。

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'rest_framework',
   'rest_framework.authtoken',
   'corsheaders',
   'djoser',
]

CORS_ALLOWED_ORIGINS = [
   "http://localhost:8080",
]

REST_FRAMEWORK = {
   'DEFAULT_AUTHENTICATION_CLASSES': [
       'rest_framework.authentication.TokenAuthentication',
   ]
}

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

urlpatterns = [

   path('admin/', admin.site.urls),
   path('auth/', include('djoser.urls.authtoken')),
   
]

今回はTokenを用いた認証を行なったので、認証クラスはTokenです。

次に、Vuexの設定です。

まずは、storeファイルのindex.jsを以下のようにします。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
   token: ''
 },
 mutations: {
   setToken(state, token) {
     state.token = token
   }
 },
 actions: {
 },
 modules: {
 },
});

そしてviewsファイルの中にLogin.vueを作って、以下のように設定します。

<template>
   <v-app>
      <v-container>
          <v-text-field label="username" type="text" v-model="username"></v-text-field>
          <v-text-field label="password" type="password" v-model="password"></v-text-field>
          <v-btn outlined @click="login">
              login
          </v-btn>
      </v-container>
   </v-app>
</template>

<script>
import axios from 'axios';

export default {
   name: "login",
   data() {
       return {
           username: "",
           password: "",
       }
   },
   methods: {
       login() {

           const data = {
               username: this.username,
               password: this.password
           }

           axios
               .post('http://127.0.0.1:8000/auth/token/login/', data)
               .then(response => {
                   this.$store.commit("setToken", response.data.auth_token)
                   this.$router.push('/')
               })
               .catch(error => {
                   console.log(error)
               })
       }
   }
}
</script>

最後にルーティングを設定します。

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";

import Store from "../store/index.js";

Vue.use(VueRouter);

const routes = [
 {
   path: "/",
   name: "Home",
   component: Home,
   meta: { requiresAuth: true }
 },
 {
   path: "/login",
   name: "Login",
   component: Login,
 },
];

const router = new VueRouter({
 routes,
});

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth) && !Store.state.token) {
   next({ path: '/login', query: { redirect: to.fullPath } });
 } else {
   next();
 }
});

export default router;

このようにすれば、ログイン機能を実装することができます！