随着 Web 应用程序的复杂性不断增加，Web 应用的安全性已经成为了一个热门话题。其中，token 鉴权是一个常见的安全措施，它可以通过验证用户的身份来确保资源的安全访问。本文将介绍如何在 Vue.js 应用程序中实现 token 鉴权的全局拦截及刷新机制。
什么是 token 鉴权？
token 鉴权是一种用户认证机制，它是基于 token 来进行身份验证的。具体而言，当用户成功登录后，后端服务器会生成一个 token，并将其作为响应返回给用户。之后，用户就可以使用这个 token 来访问受保护的资源。
如何在 Vue.js 中实现 token 鉴权
在 Vue.js 应用程序中实现 token 鉴权，需要进行如下步骤：
1. 发送请求时附带 token
在 Vue.js 应用程序中，每次发送请求时，需要将 token 附加在请求 header 中，以供后端服务器进行验证。在 Vue.js 中，可以通过 Axios 来实现发送带有 token 的请求。
-- -------------------- ---- -------
------ ----- ---- --------
------------------------------------- -- -
----- ----- - ------------------------------
-- ------- -
---------------------------- - ------- - - ------
-
------ -------
---上面的代码中，我们通过 axios.interceptors.request.use 函数来统一设置请求拦截器。在请求拦截器中，我们获取了本地存储中的 token，并将其以 Bearer ${token} 的形式附加在请求 header 中。
2. 后端返回 401 状态码时，刷新 token
在 Vue.js 应用程序中，当后端服务器返回 401 状态码（未经授权）时，需要刷新 token。这可以通过发送一个新的请求来实现。
-- -------------------- ---- -------
------ ----- ---- --------
------------------------------------------ --- -- -
----- - ------- --------- - ------ - - - ----
-- ------- --- ---- -
------ ------------------------------------
-------------- -- -
----- ----- - --------------------
----------------------------- -------
---------------------------- - ------- - - ------
------ --------------
--
--------------- -- -
---------------------------------
----------------------
------ -------------------------
---
-
------ --------------------
---在上面的代码中，我们通过 axios.interceptors.response.use 函数来统一设置响应拦截器。在响应拦截器中，我们检测服务器是否返回 401 状态码。如果是，我们发送一个新的请求来刷新 token。如果刷新成功，将新的 token 存储在本地存储中，并将其设置为默认请求头的 Authorization。此后，我们重新发送请求，以确保请求中带有新的 token。如果刷新 token 失败，则将 token 从本地存储中移除，并将用户重定向到登录页面。
结论
本文中，我们介绍了在 Vue.js 应用程序中实现 token 鉴权的全局拦截及刷新机制。通过将 token 附加在请求 header 中，并在服务器返回 401 状态码时刷新 token，我们可以确保用户可以安全地访问受保护的资源。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670111fa0bef792019b11b02