Home > Article > Web Front-end > A complete guide to implementing front-end and back-end separation in Vue (axios, jwt)
Complete guide to implementing front-end and back-end separation in Vue (axios, jwt)
With the continuous development of front-end technology, front-end and back-end separation has become a trend in Web development. As a popular front-end framework, Vue perfectly matches the back-end separation development method. This article will introduce how to use Vue with axios and jwt to achieve front-end and back-end separation development, and provide code examples and precautions.
1. What is axios?
axios is a Promise-based HTTP client for browsers and node.js. It enjoys the following advantages:
2. What is jwt?
jwt (JSON Web Token) is a lightweight authentication and authorization standard. It allows a secure way to authenticate information between different applications. JWT consists of three parts: header, payload and signature. The header contains information such as token type and encryption algorithm; the payload contains the information that needs to be transmitted and can be customized; the signature is used to verify whether the token has been tampered with.
3. How to use axios in Vue?
Use axios in the Vue component to request data. The steps are as follows:
npm install axios --save
import axios from 'axios'
axios.get('url')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
where url represents the request The URL address; the then() method represents the callback function after the request is successful, and the passed parameter response is the data returned by the server; the catch() method represents the callback function after the request fails, and the passed parameter error is the error message.
4. How to use jwt for authentication?
When using jwt for authentication, you first need to generate and verify jwt on the server side.
On the server side, you can use the jsonwebtoken library to generate jwt. The sample code is as follows:
const jwt = require('jsonwebtoken')
const token = jwt.sign({ user: 'username' }, 'secretkey', { expiresIn: '1h' })
Among them, the user field can store user information; secretkey is the key, Used to encrypt the token; the expiresIn field indicates the expiration time of the token and can be adjusted as needed.
On the client side, you need to obtain the jwt from the server and then verify it. Use the jsonwebtoken library to verify jwt. The sample code is as follows:
const jwt = require('jsonwebtoken')
const token = 'xxxxx' // The token obtained from the server
try {
const decoded = jwt.verify(token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} catch (err ) {
console.log(err)
}
Among them, the token is the token generated by the server; the verify() method is used to verify the validity of the token, and the returned decoded object contains the user Information, issuance time (iat) and expiration time (exp).
5. How to use jwt for authentication in Vue?
Use jwt for authentication in Vue. The steps are as follows:
After successful login, the server needs to transfer the jwt token Sent to the client, the client can store it in localStorage or cookie, the sample code is as follows:
axios.post('url', { user: 'username', password: 'password' })
.then(response => {
// Log in successfully, save token to localStorage
localStorage.setItem('token', response.data.token)
})
. catch(error => {
console.log(error)
})
Requires authentication when requesting When using the interface, the client needs to carry the token in the request header. The sample code is as follows:
axios.get('url', {
headers: { 'Authorization': 'Bearer ' localStorage.getItem( 'token') }
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
Among them, the Authorization field is the keyword in the request header, Bearer represents the policy name, which is the abbreviation of Bearer Authentication Scheme, and the following string is stored in localStorage jwt token in .
Note:
devServer: {
proxy: {
'/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' } }
}
}
Among them, target represents the target URL address, and pathRewrite represents the path rewriting rule.
This article provides detailed steps and precautions for using Vue with axios and jwt to achieve front-end and back-end separation development. I hope it will be helpful to web developers.
The above is the detailed content of A complete guide to implementing front-end and back-end separation in Vue (axios, jwt). For more information, please follow other related articles on the PHP Chinese website!