Vue.js (API、JWT、axios) でログイン認証を実装するための完全なガイド

Vue.js は、動的 Web アプリケーションを構築するための人気のある JavaScript フレームワークです。ユーザーのログイン認証の実装は、Web アプリケーションの開発に必要な部分の 1 つです。この記事では、Vue.js、API、JWT、axios を使用してログイン検証を実装するための完全なガイドを紹介します。

1. Vue.js アプリケーションの作成

まず、新しい Vue.js アプリケーションを作成する必要があります。 Vue.js アプリケーションは、Vue CLI を使用して、または手動で作成できます。

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 を統合する

次に、Vue.js アプリケーションがバックエンドと通信できるように、API と axios を統合する必要があります。 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;

この例では、axios を使用して API にアクセスし、バックエンドと通信する「AuthService」というサービスを作成します。 LocalStorage を使用して認証トークンを保存し、認証トークンに基づいてログイン状態を確認します。

5. Vue.js コンポーネントの作成

次に、ユーザー認証を処理し、ログイン ページをレンダリングする Vue.js コンポーネントを作成する必要があります。この例では、「SignIn」と​​いうコンポーネントを作成します。

<template>
  <div>
    <h2 id="登录">登录</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. ルーティング構成

次に、SignIn コンポーネントがルーティング パス上に表示されるように、Vue.js ルーティングを構成する必要があります。

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 と / の 2 つのパスが含まれています。 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" と Vue.js を使用して App.vue コンポーネントをレンダリングします。 router Vue インスタンスに渡されます。

結論

この記事では、Vue.js、axios、API を使用してユーザー ログイン検証を実装する方法に関する完全なガイドを紹介します。 Node.js と Express.js を使用して API を作成し、JWT と axios を使用してサービスを作成し、ユーザー認証を処理してログイン ページをレンダリングする Vue.js コンポーネントを作成しました。ルーティングを構成した後、Vue.js アプリケーションを使用してユーザーのログインを認証できるようになります。

以上がVue.js (API、JWT、axios) でログイン認証を実装するための完全なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。