Vue(axios, jwt)에서 프런트엔드와 백엔드 분리 구현에 대한 전체 가이드

Vue(axios, jwt)에서 프런트엔드와 백엔드 분리 구현에 대한 전체 가이드

프런트엔드 기술의 지속적인 발전으로 프런트엔드와 백엔드 분리가 웹 개발의 트렌드가 되었습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 백엔드 분리 개발 방법과 완벽하게 일치합니다. 이 기사에서는 Axios 및 jwt와 함께 Vue를 사용하여 프런트엔드와 백엔드 분리 개발을 수행하는 방법을 소개하고 코드 예제와 주의 사항을 제공합니다.

1.액시오스란?

axios는 브라우저 및 node.js용 Promise 기반 HTTP 클라이언트입니다.

1. Promise API 지원
2. 클라이언트와 서버 모두에서 사용할 수 있습니다.
3. 요청 및 응답 차단 지원
4. 지원 취소요청

2. JWT란?

jwt(JSON 웹 토큰)는 경량 인증 및 권한 부여 표준입니다. 이를 통해 서로 다른 애플리케이션 간의 정보를 안전하게 인증할 수 있습니다. JWT는 헤더, 페이로드, 서명의 세 부분으로 구성됩니다. 헤더에는 토큰 유형 및 암호화 알고리즘과 같은 정보가 포함되어 있으며, 페이로드에는 전송해야 하고 사용자 정의할 수 있는 정보가 포함되어 있으며 서명은 토큰이 변조되었는지 확인하는 데 사용됩니다.

3. Vue에서 Axios를 사용하는 방법은 무엇인가요?

Vue 구성 요소에서 axios를 사용하여 데이터를 요청합니다.

1. Axios 설치: npm을 사용하여 설치할 수 있습니다.

npm install axios --save

2. axios 가져오기: axios를 사용해야 하는 경우 컴포넌트에서 먼저 axios를 가져와야 합니다. 샘플 코드는 다음과 같습니다.

import axios from 'axios'

3. 요청 보내기: axios를 사용하여 보내는 방법 HTTP 요청은 다음과 같습니다:

axios.get('url')
.then (response => {
console.log(response.data)
})
.catch(error => {
console .log(error)
})

여기서 url은 요청된 URL 주소를 나타냅니다. then( ) 메서드는 요청이 성공한 후의 콜백 함수를 나타내며 전달된 매개 변수 응답은 서버에서 반환된 데이터입니다. () 메소드는 요청 실패 후 콜백 함수를 나타내며, 전달된 매개변수 error는 오류 메시지입니다.

4. JWT를 인증에 사용하는 방법은 무엇인가요?

인증을 위해 jwt를 사용하는 경우 먼저 서버 측에서 jwt를 생성하고 확인해야 합니다.

1. Generate jwt

서버 측에서는 jsonwebtoken 라이브러리를 사용하여 jwt를 생성할 수 있습니다. 샘플 코드는 다음과 같습니다.

const jwt = require('jsonwebtoken')
const token = jwt.sign({ user: 'username' }, 'secretkey', {expiresIn: '1h' })

그 중 user 필드는 사용자 정보를 저장할 수 있습니다. secretkey는 토큰을 암호화하는 데 사용되는 키입니다.expiresIn 필드는 만료 시간을 나타냅니다. 필요에 따라 조정될 수 있는 토큰입니다.

2. jwt 확인

클라이언트 측에서는 서버에서 jwt를 가져온 다음 확인해야 합니다. jsonwebtoken 라이브러리를 사용하여 jwt를 확인합니다. 샘플 코드는 다음과 같습니다.

const jwt = require('jsonwebtoken')
const token = 'xxxxx' // 서버에서 얻은 토큰
try {
const decoded = jwt. verify( token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} catch(err) {
console.log(err)
}

여기서 토큰은 서버에서 생성된 토큰입니다. verify() 메서드는 토큰의 유효성을 확인하는 데 사용됩니다. 반환된 디코딩된 개체에는 사용자 정보, 발급 시간(iat) 및 만료 시간(exp)이 포함됩니다.

5. Vue에서 인증을 위해 jwt를 사용하는 방법은 무엇입니까?

인증을 위해 Vue에서 jwt를 사용하는 단계는 다음과 같습니다:

1. Get token

성공적인 로그인 후 서버는 jwt 토큰을 클라이언트에 보내야 하며 클라이언트는 이를 localStorage 또는 쿠키에 저장할 수 있습니다. 샘플 코드는 다음과 같습니다:

axios.post('url', { user: 'username', 비밀번호: 'password' })
.then(response => {
// 로그인 성공, 토큰을 localStorage에 저장
localStorage.setItem('token', response.data.token)
})
.catch(error => {
console.log(error)
})

2. 요청을 보내고 토큰을 전달하세요

필요할 때 인증이 필요한 인터페이스를 요청할 때 클라이언트는 요청 헤더에 토큰을 전달해야 합니다. 샘플 코드는 다음과 같습니다.

axios.get('url', {
headers: { 'Authorization': 'Bearer ' + localStorage.getItem(' 토큰') }
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error )
})

여기서 Authorization 필드는 요청 헤더의 키워드이고 Bearer는 Bearer Authentication Scheme의 약어인 정책 이름을 나타내며 다음 문자열은 localStorage에 저장된 jwt 토큰입니다.

참고:

1. 인증을 위해 jwt를 사용할 때는 키의 기밀성에 주의해야 합니다. 그렇지 않으면 jwt 토큰이 공격자에 의해 변조되거나 위조될 수 있습니다.
2. Vue에서 axios를 사용할 때는 도메인 간 문제에 주의하고 서버 측에서 Access-Control-Allow-Origin 응답 헤더를 설정하거나 프록시를 사용하여 이를 해결해야 합니다.
3. 개발 환경에서는 webpack-dev-server를 사용하여 도메인 간 문제를 해결할 수 있습니다. 샘플 코드는 다음과 같습니다.

devServer: {
Proxy: {

'/api': {
  target: 'http://localhost:3000',
  pathRewrite: { '^/api': '' }
}

}
}

여기서 대상은 대상 URL 주소 및 pathRewrite 경로 재작성 규칙을 나타냅니다.

이 글은 Vue를 Axios 및 JWT와 함께 사용하여 프런트엔드와 백엔드 분리 개발을 달성하기 위한 자세한 단계와 주의 사항을 제공합니다. 웹 개발자에게 도움이 되기를 바랍니다.

위 내용은 Vue(axios, jwt)에서 프런트엔드와 백엔드 분리 구현에 대한 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!