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

이제 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"이라는 핸들러 메서드를 바인딩합니다. 이 메소드는 제공된 사용자 이름과 비밀번호를 기반으로 API 요청을 하는 "AuthService" 서비스의 "login" 메소드를 호출합니다.

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 및 /라는 두 가지 경로가 포함됩니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!