Panduan lengkap untuk melaksanakan pengesahan log masuk dalam Vue.js (API, JWT, axios)

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi web dinamik. Melaksanakan pengesahan log masuk pengguna adalah salah satu bahagian yang diperlukan untuk membangunkan aplikasi web. Artikel ini akan memperkenalkan panduan lengkap untuk melaksanakan pengesahan log masuk menggunakan Vue.js, API, JWT dan axios.

1. Membuat aplikasi Vue.js

Pertama, kita perlu mencipta aplikasi Vue.js baharu. Kita boleh mencipta aplikasi Vue.js menggunakan Vue CLI atau secara manual.

2. Pasang axios

axios ialah klien HTTP yang ringkas dan mudah digunakan untuk membuat permintaan HTTP. Kami boleh memasang axios menggunakan npm:

npm install axios --save

3. Buat API

Kami perlu mencipta API yang mengendalikan permintaan log masuk pengguna. Cipta API menggunakan Node.js dan Express.js. Berikut ialah contoh API asas:

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;

Dalam contoh ini, kami menggunakan JWT untuk mencipta token JWT yang akan digunakan semasa proses pengesahan pengguna. Kami menggunakan kata laluan untuk mengesahkan pengguna dan mengeluarkan token kepada pengguna sebaik sahaja pengguna disahkan.

4. Sepadukan API dan aksios

Kini kita perlu menyepadukan API dan aksios supaya aplikasi Vue.js boleh berkomunikasi dengan hujung belakang. Kami akan membuat perkhidmatan menggunakan 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;

Dalam contoh ini, kami mencipta perkhidmatan yang dipanggil "AuthService" yang menggunakan axios untuk mengakses API dan berkomunikasi dengan bahagian belakang. Kami menggunakan LocalStorage untuk menyimpan token pengesahan dan menyemak status log masuk berdasarkan token pengesahan.

5. Mencipta komponen Vue.js

Sekarang, kita perlu mencipta komponen Vue.js yang mengendalikan pengesahan pengguna dan memaparkan halaman log masuk. Dalam contoh ini, kami akan mencipta komponen yang dipanggil "Log Masuk".

<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>

Dalam contoh ini, kami mencipta komponen yang dipanggil "Log Masuk" dan mengikat kaedah pengendali yang dipanggil "handleSubmit" pada komponen. Kaedah ini memanggil kaedah "log masuk" perkhidmatan "AuthService", yang membuat permintaan API berdasarkan nama pengguna dan kata laluan yang disediakan.

6. Konfigurasi laluan

Sekarang, kami perlu mengkonfigurasi laluan Vue.js supaya komponen Log Masuk kami boleh dipaparkan pada laluan penghalaan.

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;

Dalam contoh ini, konfigurasi penghalaan kami termasuk dua laluan: /log masuk dan /. Kami mengikat komponen Log Masuk ke laluan /login dan komponen Laman Utama ke laluan /.

7. Mengkonfigurasi aplikasi Vue.js

Akhir sekali, kita perlu mengkonfigurasi aplikasi Vue.js dan menambah komponen penghalaan Vue.js pada templat aplikasi Vue.js tengah.

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

Dalam contoh ini, kami mencipta tika Vue menggunakan pernyataan "Vue baharu" Vue.js dan menjadikan komponen App.vue menggunakan fungsi pemaparan Vue.js "h" dan penghala Vue.js Diluluskan kepada contoh Vue.

Kesimpulan

Artikel ini membentangkan panduan lengkap tentang cara melaksanakan pengesahan log masuk pengguna menggunakan Vue.js, axios dan API. Kami mencipta API menggunakan Node.js dan Express.js, mencipta perkhidmatan menggunakan JWT dan axios, dan mencipta komponen Vue.js untuk mengendalikan pengesahan pengguna dan memaparkan halaman log masuk. Selepas mengkonfigurasi penghalaan, kami boleh menggunakan aplikasi Vue.js dan mengesahkan log masuk pengguna.

Atas ialah kandungan terperinci Panduan lengkap untuk melaksanakan pengesahan log masuk dalam Vue.js (API, JWT, axios). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!