Un guide complet pour implémenter l'authentification de connexion dans Vue.js (API, JWT, axios)

Vue.js est un framework JavaScript populaire pour créer des applications Web dynamiques. La mise en œuvre de l’authentification de connexion des utilisateurs est l’une des parties nécessaires au développement d’applications Web. Cet article présentera un guide complet sur la mise en œuvre de la vérification de connexion à l'aide de Vue.js, API, JWT et axios.

1. Création d'une application Vue.js

Tout d'abord, nous devons créer une nouvelle application Vue.js. Nous pouvons créer une application Vue.js à l'aide de Vue CLI ou manuellement.

2. Installer axios

axios est un client HTTP simple et facile à utiliser pour effectuer des requêtes HTTP. Nous pouvons installer axios en utilisant npm :

npm install axios --save

3. Créer une API

Nous devons créer une API qui gère les demandes de connexion des utilisateurs. Créez des API à l'aide de Node.js et Express.js. Voici un exemple d'API de base :

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;

Dans cet exemple, nous utilisons JWT pour créer un jeton JWT qui sera utilisé lors du processus d'authentification de l'utilisateur. Nous utilisons un mot de passe pour authentifier l'utilisateur et émettons un jeton à l'utilisateur une fois qu'il est authentifié.

4. Intégration de l'API et d'axios

Nous devons maintenant intégrer l'API et axios pour que l'application Vue.js puisse communiquer avec le backend. Nous allons créer un service en utilisant axios.

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;

Dans cet exemple, nous avons créé un service appelé "AuthService" qui utilise axios pour accéder à l'API et communiquer avec le backend. Nous utilisons LocalStorage pour stocker le jeton d'authentification et vérifier l'état de connexion en fonction du jeton d'authentification.

5. Création d'un composant Vue.js

Maintenant, nous devons créer un composant Vue.js qui gère l'authentification des utilisateurs et restitue la page de connexion. Dans cet exemple, nous allons créer un composant appelé « 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>

Dans cet exemple, nous créons un composant appelé "SignIn" et lions une méthode de gestionnaire appelée "handleSubmit" sur le composant. Cette méthode appelle la méthode « login » du service « AuthService », qui effectue une requête API basée sur le nom d'utilisateur et le mot de passe fournis.

6. Configuration du routage

Maintenant, nous devons configurer le routage Vue.js afin que notre composant SignIn puisse être affiché sur le chemin de routage.

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;

Dans cet exemple, notre configuration de routage comprend deux chemins : /login et /. Nous lions le composant SignIn au chemin /login et le composant Home au chemin /.

7. Configurer l'application Vue.js

Enfin, nous devons configurer l'application Vue.js et ajouter le composant de routage Vue.js au modèle d'application Vue.js.

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');

Dans cet exemple, nous créons une instance Vue à l'aide de l'instruction « new Vue » de Vue.js et rendons le composant App.vue à l'aide de la fonction de rendu « h » de Vue.js et passons le routeur Vue.js à l'instance Vue. .

Conclusion

Cet article présente un guide complet sur la façon de mettre en œuvre la vérification de la connexion des utilisateurs à l'aide de Vue.js, axios et API. Nous avons créé une API à l'aide de Node.js et Express.js, créé le service à l'aide de JWT et axios, et créé des composants Vue.js pour gérer l'authentification des utilisateurs et afficher la page de connexion. Après avoir configuré le routage, nous pouvons utiliser l'application Vue.js et authentifier la connexion de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!