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.

image.png

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

Je pensais que gérer avec un seul getters ou actions ne ferait que gonfler le code source, alors j'ai essayé de le diviser en modules pour chaque fonction, mais j'y ai été accro pendant environ une demi-journée.
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();
        }
      );
    });
  }
}

Si vous oubliez d'ajouter "/ (barre oblique)" à la fin de l'url ci-dessus, il sera rejeté par CORS et une erreur se produira. Il m'a fallu beaucoup de temps pour le remarquer, et j'y ai été accro pendant environ une heure ...    

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.

image.png

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.

Recommended Posts

Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 5] ~ Authentification des utilisateurs ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
Créons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 2] ~ Configuration de Vue ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 4] ~ Construction MySQL et migration de base de données avec Docker ~
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 1
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 2
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 3
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 4
Essayez de créer un jeu simple avec Python 3 et iPhone
Créons une application Mac avec Tkinter et py2app
Créons un client de socket Web avec Python. (Authentification par jeton d'accès)
Faisons une interface graphique avec python.
Faisons une rupture de bloc avec wxPython
Faisons un graphe avec python! !!
Faisons un spacon avec xCAT
Créez un thermomètre avec Raspberry Pi et rendez-le visible sur le navigateur Partie 4
Faisons un jeu de shiritori avec Python
Faisons la voix lentement avec Python
Faisons un langage simple avec PLY 1
Créez un framework Web avec Python! (1)
Faisons une IA à trois yeux avec Pylearn 2
Faisons un bot Twitter avec Python!
Créez un framework Web avec Python! (2)
Créons une application Web de conversion A vers B avec Flask! De zéro ...
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Remplaçons UWSC par Python (5) Faisons un robot
Créons une application capable de rechercher des images similaires avec Python et Flask Part1
Créons une application capable de rechercher des images similaires avec Python et Flask Part2
Faisons un Makefile et construisons-le (super débutant)
[Jouons avec Python] Créer un livre de comptes de ménage
Comment faire un jeu de tir avec toio (partie 1)
Facilitons un peu la gestion des dépendances avec pip
Essayez de créer une grille sphérique avec Rhinoceros / Grasshopper / GHPython
[Super facile] Faisons un LINE BOT avec Python.
Créez facilement des systèmes d'authentification, de gestion des utilisateurs et multilingues avec Flask-AppBuilder
Créez un plug-in tky2jgd sans praticité avec QGIS Partie 2
Associez Python Enum à une fonction pour la rendre appelable
Créons un diagramme PRML avec Python, Numpy et matplotlib.
Créer un plug-in tky2jgd sans praticité avec QGIS Partie 1
Créez des RPG 2D avec Ren'Py (3) - Boutique d'objets et d'outils
Faisons un diagramme sur lequel on peut cliquer avec IPython
Fabriquez un thermomètre BLE et obtenez la température avec Pythonista3