随着前端技术的不断发展，前后端分离已成为Web开发的趋势。Vue作为一款流行的前端框架，与后端分离的开发方式完美搭配。本文将介绍如何使用Vue配合axios和jwt实现前后端分离开发，并提供代码示例和注意事项。
一、什么是axios？
axios是一个基于Promise用于浏览器和node.js的HTTP客户端，它享有以下优点：
- 支持Promise API
- 客户端和服务端均可使用
- 支持拦截请求和响应
- 支持取消请求
二、什么是jwt？
立即学习“前端免费学习笔记（深入）”；
jwt（JSON Web Token）是一个轻量级的身份验证和授权标准。它允许一个安全的方式在不同的应用程序之间验证信息。jwt由三部分组成：头部、负载和签名。头部包含令牌类型、加密算法等信息；负载包含需要传递的信息，可以自定义；签名则用来验证令牌是否被篡改过。
三、如何在Vue中使用axios？
在Vue组件中使用axios进行请求数据，步骤如下：
- 安装axios：可以使用npm进行安装，命令如下：
npm install axios --save
- 导入axios：在需要使用axios的组件中，需要先导入axios，示例代码如下：
import axios from 'axios'
- 发送请求：使用axios发送HTTP请求的方式如下：
axios.get('url')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
其中，url表示请求的URL地址；then()方法表示请求成功后的回调函数，传入的参数response即为服务器返回的数据；catch()方法表示请求失败后的回调函数，传入的参数error为错误信息。
四、如何使用jwt进行身份验证？
在使用jwt进行身份验证时，首先需要在服务端进行jwt的生成和验证。
- 生成jwt
在服务端，可以使用jsonwebtoken库生成jwt，示例代码如下：
const jwt = require('jsonwebtoken')
const token = jwt.sign({ user: 'username' }, 'secretkey', { expiresIn: '1h' })
其中，user字段可以存储用户信息；secretkey是密钥，用于对令牌进行加密；expiresIn字段表示token的过期时间，可以根据需要进行调整。
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
- 验证jwt
在客户端，需要从服务端获取jwt，然后进行验证。使用jsonwebtoken库进行jwt的验证，示例代码如下：
const jwt = require('jsonwebtoken')
const token = 'xxxxx' // 从服务端获取到的token
try {
const decoded = jwt.verify(token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} catch (err) {
console.log(err)
}
其中，token为服务端生成的token；verify()方法用于验证token的有效性，返回的decoded对象包含了用户信息、发放时间(iat)和过期时间(exp)。
五、如何在Vue中使用jwt进行身份验证？
在Vue中使用jwt进行身份验证，步骤如下：
- 获取token
在登录成功后，服务端需要将jwt令牌发送到客户端，客户端可以将其存储在localStorage或cookie中，示例代码如下：
axios.post('url', { user: 'username', password: 'password' })
.then(response => {
// 登录成功，将token保存到localStorage中
localStorage.setItem('token', response.data.token)
})
.catch(error => {
console.log(error)
})
- 发送请求并携带token
在需要请求需要身份验证的接口时，客户端需要在请求头中携带token，示例代码如下：
axios.get('url', {
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
其中，Authorization字段为请求头中的关键字，Bearer表示策略名称，即Bearer Authentication Scheme的缩写，后面的字符串为存储在localStorage中的jwt令牌。
注意事项：
- 在使用jwt进行身份验证时，需要注意密钥的保密性，否则可能会被攻击者篡改或伪造jwt令牌。
- 在Vue中使用axios时，需要注意跨域问题，在服务端设置Access-Control-Allow-Origin响应头或使用代理解决。
- 在开发环境中，可以使用webpack-dev-server解决跨域问题，示例代码如下：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' }
}}
}
其中，target表示目标URL地址，pathRewrite表示路径重写规则。
本文提供了使用Vue配合axios和jwt实现前后端分离开发的详细步骤和注意事项，希望能够对Web开发者有所帮助。
