[PYTHON] Machen wir eine nervenschwächende Anwendung mit Vue.js und Django-Rest-Framework [Teil 6] ~ Benutzerauthentifizierung 2 ~

<< Teil 5

Login implementiert

Anmeldebildschirm erstellen

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">Einloggen</v-btn>
      </div>
    </v-container>
  </v-form>
</template>

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

Ändern Sie 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
    },
  ]
})

Wenn Sie "npm run dev" ausführen, wird zunächst der erstellte Anmeldebildschirm angezeigt.

vuex installieren

npm install vuex --save

Installieren Sie Axios

axios ist ein "Promise-basierter HTTP-Client" (von offiziell).

npm install axios --save

Bereiten Sie eine allgemeine Funktion zum Auslösen von Get- und Post-Anfragen mit Axios vor

Bereiten Sie einen "api" -Ordner direkt unter "src" vor und erstellen Sie common.ts direkt darunter, um allgemeine Funktionen für Axios vorzubereiten.

concentratio #Projektstammverzeichnis
├── config
│   ├── ...
│
├── frontend
│   ├── ...
│   ├── ..
│   ├── .
│   └── src
│         └──api #Erstellen
│             └──common.ts #Erstellen
└── manage.py

src/api/common.ts

import axios from "axios";

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

/**
 *GET Anfrage
 * @param url URL
 */
function get(url) {
  return baseRequest.get(url);
}

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

export default {
    get,
    post
};

Bereiten Sie das Vuex-Modul für die Authentifizierung vor

concentratio #Projektstammverzeichnis
├── config
│   ├── ...
│
├── frontend
│   ├── ...
│   ├── ..
│   ├── .
│   └── src
│         └──store #Erstellen
│             └──authenticates #Erstellen
│                 ├──actions.ts #Erstellen
│                 └──index.ts.ts #Erstellen
│                 └──mutations.ts #Erstellen
└── 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 => {
          //Verarbeitung auf Erfolg
          commit("SET_TOKEN", response.data.token); // mutations.ts SET_Übergeben Sie das Token an die TOKEN-Funktion
          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, //Stellen Sie sicher, dass es ein- oder ausgeschaltet ist. Beim Lesen mit den mapActions von vue wird eine Fehlermeldung angezeigt.
  state,
  actions,
  mutations
};

store/authenticates/mutations.ts

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

Erstellen Sie index.ts direkt unter src / store

store/index.ts

import Vue from "vue";
import Vuex from "vuex";
import authModules from "./authenticates"; //Laden Sie die Module unter Authentifizierungen mit dem Namen authModules

Vue.use(Vuex);

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

Behoben src / main.ts

src/main.ts

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

Login.vue behoben

Login.vue

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

      <div class="text-right">
        <v-btn depressed large color="primary" @click="login">
Einloggen
        </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"]), //Modulierte Aktion.Lesen Sie die LOGIN-Funktion von ts
    login: function() {
      const data = {
        username: this.username,
        password: this.password
      };
      this.LOGIN(data).then(res => {
        console.log(res);
      });
    }
  },
  mounted() {
    //
  }
};
</script>

Überprüfen Sie, ob die Antwort zurückgegeben wird

Nachdem Sie den richtigen Benutzernamen und das richtige Passwort eingegeben haben, drücken Sie die Login-Taste und überprüfen Sie, ob die Antwort zurückgegeben wird.

Es ist zurück!

Wechseln Sie nach erfolgreicher Authentifizierung zur obersten Seite.

Ersetzen Sie einfach console.log (res); in Login.vue durch this. $ Router.push (" / playcreen ");.

das ist alles

Ich konnte vom Anmeldebildschirm aus erfolgreich zur obersten Seite wechseln.