[PYTHON] Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~

<< Partie 5

Connexion implémentée

Créer un écran de connexion

Login.vue

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="username"
            label="Username"
            outlined
          ></v-text-field>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="password"
            outlined
            label="Password"
            style="min-height: 96px"
            type="password"
          >
          </v-text-field>
        </v-col>
      </v-row>

      <div class="text-right">
        <v-btn depressed large color="primary">S'identifier</v-btn>
      </div>
    </v-container>
  </v-form>
</template>

<script>
export default {
  name: 'Login',
  data: function () {
    return {
      username: null,
      password: null
    }
  },
  mounted () {
    //
  }
}
</script>

Modifier router / index.ts

router/index.ts

import Vue from 'vue'
import Router from 'vue-router'
import PlayScreen from '@/views/PlayScreen.vue'
import Login from '@/views/Login.vue'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      redirect: 'login'
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/playscreen',
      name: 'playscreen',
      component: PlayScreen
    },
  ]
})

Lorsque vous faites npm run dev, l'écran de connexion créé sera affiché initialement.

installation de vuex

npm install vuex --save

Installer axios

axios est un "client HTTP basé sur Promise" (from official).

npm install axios --save

Préparez une fonction commune pour lancer des requêtes get et post avec axios

Préparez un dossier ʻapidirectement soussrc`, et créez common.ts directement sous celui-ci pour préparer les fonctions communes pour axios.

concentratio #Répertoire racine du projet
├── config
│   ├── ...
│
├── frontend
│   ├── ...
│   ├── ..
│   ├── .
│   └── src
│         └──api #Créer
│             └──common.ts #Créer
└── manage.py

src/api/common.ts

import axios from "axios";

const baseRequest = axios.create({
  baseURL: "http://localhost:8000",
  headers: {
      "Content-Type": "application/json",
  }
});

/**
 *OBTENIR la demande
 * @param url URL
 */
function get(url) {
  return baseRequest.get(url);
}

/**
 *Demande POST
 * @param url URL
 */
function post(url, payload) {
  return baseRequest.post(url, payload);
}

export default {
    get,
    post
};

Préparer le module vuex pour l'authentification

concentratio #Répertoire racine du projet
├── config
│   ├── ...
│
├── frontend
│   ├── ...
│   ├── ..
│   ├── .
│   └── src
│         └──store #Créer
│             └──authenticates #Créer
│                 ├──actions.ts #Créer
│                 └──index.ts.ts #Créer
│                 └──mutations.ts #Créer
└── manage.py

store/authenticates/actions.ts

import commonAxios from "../../api/common";

export default {
  LOGIN: function({ commit }, payload) {
    return new Promise((success, error) => {
      commonAxios.post("/api-token-auth/", payload).then(
        response => {
          //Traitement en cas de succès
          commit("SET_TOKEN", response.data.token); // mutations.ts SET_Passez le jeton à la fonction TOKEN
          commonAxios.baseRequest.defaults.headers.common['Authorization'] = `JWT ${response.data.token}`;
          success();
        }
      );
    });
  }
}

store/authenticates/index.ts

import actions from './actions';

export const state = {};

export default {
  namespaced: true, //Assurez-vous de l'activer ou de le désactiver et vous obtiendrez une erreur lors de la lecture avec mapActions de vue.
  state,
  actions,
  mutations
};

store/authenticates/mutations.ts

export default {
  SET_TOKEN: function(state, token) {
    state.token = token
  }
};

Créez ʻindex.ts directement sous src / store`

store/index.ts

import Vue from "vue";
import Vuex from "vuex";
import authModules from "./authenticates"; //Chargez les modules sous authentifie avec le nom authModules

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    authModules: authModules,
  }
});

Correction de src / main.ts

src/main.ts

.
..
...
import store from "./store"; //ajouter à
...
..
.
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  vuetify: new Vuetify(),
  store //ajouter à
});

Correction de Login.vue

Login.vue

<template>
  <v-form>
    <v-container>
      ...
      ..
      .

      <div class="text-right">
        <v-btn depressed large color="primary" @click="login">
S'identifier
        </v-btn>
      </div>
    </v-container>
  </v-form>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "Login",
  data: function() {
    return {
      username: null,
      password: null
    };
  },
  methods: {
    ...mapActions("authModules", ["LOGIN"]), //Action moduleisée.Lire la fonction LOGIN à partir de ts
    login: function() {
      const data = {
        username: this.username,
        password: this.password
      };
      this.LOGIN(data).then(res => {
        console.log(res);
      });
    }
  },
  mounted() {
    //
  }
};
</script>

Vérifier si la réponse est retournée

Après avoir entré le nom d'utilisateur et le mot de passe corrects, appuyez sur le bouton de connexion et vérifiez que la réponse est renvoyée.

Il est de retour!

Une fois l'authentification réussie, passez à la page supérieure.

Remplacez simplement console.log (res); dans Login.vue par this. $ Router.push (" / playcreen ");.

c'est tout

J'ai réussi à passer à la première page à partir de l'écran de connexion.