Eine vollständige Anleitung zur Implementierung der Anmeldeauthentifizierung in Vue.js (API, JWT, Axios)

Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen dynamischer Webanwendungen. Die Implementierung der Benutzeranmeldeauthentifizierung ist einer der notwendigen Bestandteile bei der Entwicklung von Webanwendungen. In diesem Artikel wird eine vollständige Anleitung zur Implementierung der Anmeldeüberprüfung mit Vue.js, API, JWT und Axios vorgestellt.

1. Erstellen einer Vue.js-Anwendung

Zuerst müssen wir eine neue Vue.js-Anwendung erstellen. Wir können eine Vue.js-Anwendung mit der Vue-CLI oder manuell erstellen.

2. Axios installieren

axios ist ein einfacher und benutzerfreundlicher HTTP-Client zum Senden von HTTP-Anfragen. Wir können Axios mit npm installieren:

npm install axios --save

3. API erstellen

Wir müssen eine API erstellen, die Benutzeranmeldeanfragen verarbeitet. Erstellen Sie APIs mit Node.js und Express.js. Hier ist ein einfaches API-Beispiel:

const express = require('express');
const router = express.Router();
const jwt = require('jsonwebtoken');

router.post('/login', function(req, res) {
  // TODO: 根据请求的用户名和密码查询用户
  const user = {id: 1, username: 'test', password: 'password'};

  // 如果用户不存在或密码不正确则返回401
  if (!user || req.body.password !== user.password) {
    return res.status(401).json({message: '用户名或密码错误'});
  }

  const token = jwt.sign({sub: user.id}, 'secret');

  res.json({token: token});
});

module.exports = router;

In diesem Beispiel verwenden wir JWT, um ein JWT-Token zu erstellen, das während des Benutzerauthentifizierungsprozesses verwendet wird. Wir verwenden ein Passwort zur Authentifizierung des Benutzers und stellen dem Benutzer ein Token aus, sobald der Benutzer authentifiziert ist.

4. API und Axios integrieren

Jetzt müssen wir API und Axios integrieren, damit die Vue.js-Anwendung mit dem Backend kommunizieren kann. Wir werden einen Dienst mit Axios erstellen.

import axios from 'axios';

class AuthService {
  constructor() {
    this.http = axios.create({
      baseURL: process.env.API_URL
    });
  }

  login(username, password) {
    return this.http.post('/login', {username, password})
      .then(response => {
        if (response.data.token) {
          localStorage.setItem('token', response.data.token);
        }

        return Promise.resolve(response.data);
      });
  }

  logout() {
    localStorage.removeItem('token');
    return Promise.resolve();
  }

  isLoggedIn() {
    const token = localStorage.getItem('token');
    return !!token;
  }
}

export default AuthService;

In diesem Beispiel haben wir einen Dienst namens „AuthService“ erstellt, der Axios verwendet, um auf die API zuzugreifen und mit dem Backend zu kommunizieren. Wir verwenden LocalStorage, um das Authentifizierungstoken zu speichern und den Anmeldestatus anhand des Authentifizierungstokens zu überprüfen.

5. Vue.js-Komponente erstellen

Jetzt müssen wir eine Vue.js-Komponente erstellen, die die Benutzerauthentifizierung übernimmt und die Anmeldeseite rendert. In diesem Beispiel erstellen wir eine Komponente namens „SignIn“.

<template>
  <div>
    <h2>登录</h2>
    <form v-on:submit.prevent="handleSubmit">
      <div>
        <label for="username">用户名</label>
        <input id="username" type="text" v-model="username"/>
      </div>
      <div>
        <label for="password">密码</label>
        <input id="password" type="password" v-model="password"/>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import AuthService from './services/AuthService';

export default {
  name: 'SignIn',
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleSubmit() {
      AuthService.login(this.username, this.password)
        .then(() => {
          this.$router.push('/');
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

In diesem Beispiel erstellen wir eine Komponente namens „SignIn“ und binden eine Handler-Methode namens „handleSubmit“ an die Komponente. Diese Methode ruft die Methode „login“ des Dienstes „AuthService“ auf, die eine API-Anfrage auf der Grundlage des bereitgestellten Benutzernamens und Passworts durchführt.

6. Routing-Konfiguration

Jetzt müssen wir das Vue.js-Routing konfigurieren, damit unsere SignIn-Komponente auf dem Routing-Pfad angezeigt werden kann.

import Vue from 'vue';
import VueRouter from 'vue-router';
import SignIn from './SignIn.vue';
import Home from './Home.vue';

Vue.use(VueRouter);

const routes = [
  {path: '/login', component: SignIn},
  {path: '/', component: Home}
];

const router = new VueRouter({
  routes
});

export default router;

In diesem Beispiel umfasst unsere Routing-Konfiguration zwei Pfade: /login und /. Wir binden die SignIn-Komponente an den /login-Pfad und die Home-Komponente an den /-Pfad.

7. Vue.js-Anwendung konfigurieren

Abschließend müssen wir die Vue.js-Anwendung konfigurieren und die Vue.js-Routing-Komponente zur Vue.js-Anwendungsvorlage hinzufügen.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

In diesem Beispiel erstellen wir eine Vue-Instanz mit der „new Vue“-Anweisung von Vue.js und rendern die App.vue-Komponente mit der Renderfunktion „h“ von Vue.js und übergeben den Vue.js-Router an die Vue-Instanz .

Fazit

Dieser Artikel enthält eine vollständige Anleitung zur Implementierung der Benutzeranmeldeüberprüfung mithilfe von Vue.js, axios und API. Wir haben eine API mit Node.js und Express.js erstellt, den Dienst mit JWT und Axios erstellt und Vue.js-Komponenten erstellt, um die Benutzerauthentifizierung durchzuführen und die Anmeldeseite darzustellen. Nachdem wir das Routing konfiguriert haben, können wir die Vue.js-Anwendung verwenden und die Benutzeranmeldung authentifizieren.

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zur Implementierung der Anmeldeauthentifizierung in Vue.js (API, JWT, Axios). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!