Vue.js實作登入驗證的完整指南（API、JWT、axios）

Vue.js是一種流行的JavaScript框架，用於建立動態網路應用程式。實現使用者登入驗證是開發網頁應用程式的必要部分之一。本文將介紹使用Vue.js、API、JWT和axios實作登入驗證的完整指南。

1. 建立Vue.js應用程式

首先，我們需要建立一個新的Vue.js應用程式。我們可以使用Vue CLI或手動建立一個Vue.js應用程式。

2. 安裝axios

axios是一種簡單易用的HTTP客戶端，用於發出HTTP請求。我們可以使用npm安裝axios：

npm install axios --save

3. 建立API

#我們需要建立一個API，用於處理使用者登入要求。使用Node.js和Express.js建立API。以下是一個基本的API範例：

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;

在這個範例中，我們使用JWT建立一個JWT令牌，該令牌將在使用者驗證過程中使用。我們使用密碼來驗證用戶，並在用戶驗證通過後向用戶發出令牌。

4. 整合API和axios

現在，我們需要將API和axios整合起來，以便Vue.js應用程式可以與後端進行通訊。我們將使用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;

在這個範例中，我們建立了一個名為「AuthService」的服務，該服務使用axios存取API和與後端進行通訊。我們使用LocalStorage儲存驗證令牌，並根據身分驗證令牌檢查登入狀態。

5. 建立Vue.js元件

現在，我們需要建立Vue.js元件，用於處理使用者驗證和呈現登入頁面。在此範例中，我們將建立一個名為「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>

在此範例中，我們建立了一個名為「SignIn」的元件，並在該元件上綁定一個名為「handleSubmit」的處理程序方法。此方法呼叫「AuthService」服務的「login」方法，該方法根據提供的使用者名稱和密碼發出API請求。

6.路由設定

現在，我們需要設定Vue.js路由，以便我們的SignIn元件可以顯示在路由路徑上。

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;

在此範例中，我們的路由配置包括兩個路徑：/login和/。我們將SignIn元件綁定到/login路徑，將Home元件綁定到/路徑。

7. 配置Vue.js應用程式

最後，我們需要設定Vue.js應用程序，並將Vue.js路由元件新增至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');

在這個範例中，我們使用Vue.js的「new Vue」語句建立Vue實例，並使用Vue.js的渲染函數「h」呈現App.vue元件，並將Vue.js路由器傳遞給Vue實例。

結論

本文介紹如何使用Vue.js、axios和API實作使用者登入驗證的完整指南。我們使用Node.js和Express.js建立了一個API，使用了JWT和axios創建了服務，並創建了Vue.js元件來處理使用者驗證和呈現登入頁面。在配置路由後，我們可以使用Vue.js應用程式並驗證使用者登入。

以上是Vue.js實作登入驗證的完整指南（API、JWT、axios）的詳細內容。更多資訊請關注PHP中文網其他相關文章！