在 Vue.js SPA 中使用 JWT 做身份认证实践-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，单页面应用（SPA）已经成为现代 Web 开发中的重要方式。而随之而来的，就是对用户身份认证的需求。JWT（JSON Web Token）作为一种轻量级的身份认证机制，已经被广泛应用于前后端分离的 Web 应用中。本文将介绍如何在 Vue.js SPA 中使用 JWT 进行身份认证实践。

JWT 基本概念

JWT 是一种基于 JSON 的开放标准，用于在网络上安全地传输信息。JWT 由三部分组成，分别是 Header、Payload 和 Signature。

Header

Header 部分通常由两部分组成，分别是 token 的类型（即 JWT）和所使用的算法（如 HS256、RS256 等）。

Payload

Payload 部分是 JWT 的主体内容，通常包含三种类型的信息：

Registered Claims：预定义的一些标准声明，如 iss（签发者）、exp（过期时间）、sub（主题）等。
Public Claims：自定义的一些声明，用于传递应用程序特定的信息。
Private Claims：作为 JWT 的一部分，用于在双方之间共享信息，但不会被传输到其他服务端。

Signature

Signature 部分是对 Header 和 Payload 部分进行签名后的结果。签名的目的是为了验证数据的完整性和真实性。

在 Vue.js SPA 中使用 JWT

在 Vue.js SPA 中使用 JWT 进行身份认证，通常需要以下几个步骤：

1. 登录

用户在登录时，需要向服务端发送用户名和密码等信息。服务端验证通过后，会生成一个 JWT 并返回给客户端。客户端需要将 JWT 存储在本地，以便后续的请求中使用。

示例代码：

// 登录请求
axios.post('/api/login', {
  username: 'admin',
  password: '123456'
}).then(res => {
  // 存储 JWT
  localStorage.setItem('jwt', res.data.token)
})

2. 认证请求

在每次请求时，需要将 JWT 携带在请求头中。服务端通过验证 JWT 的有效性，判断当前用户的身份。

示例代码：

// 认证请求
axios.get('/api/user', {
  headers: {
    Authorization: `Bearer ${localStorage.getItem('jwt')}`
  }
}).then(res => {
  console.log(res.data)
})

3. 登出

用户在登出时，需要清除本地存储的 JWT。

示例代码：

// 登出
localStorage.removeItem('jwt')

总结

JWT 作为一种轻量级的身份认证机制，具有简单、安全、可靠等优点。在 Vue.js SPA 中使用 JWT 进行身份认证，可以有效地提高 Web 应用的安全性和用户体验。希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656e87bfd2f5e1655d6b2075