在前端开发中，我们通常需要处理 cookie 和 token，以实现用户认证和授权等功能。在 Vue.js 中，可以使用第三方库来处理 cookie 和 token，比如 js-cookie 和 vue-cookie。本文将介绍如何使用这些库来处理 cookie 和 token。
什么是 cookie？
Cookie 是一个小的文本文件，存储在用户的计算机上。它通常用于存储用户的登录信息、购物车内容等。在 Vue.js 中，可以使用 js-cookie 来读写 cookie。
首先，我们需要安装 js-cookie：
npm install js-cookie --save
然后，在需要使用 cookie 的组件中引入 js-cookie：
import Cookies from 'js-cookie'
接下来，就可以使用 js-cookie 的 API 来读写 cookie 了。比如，我们可以在登录成功后将用户信息存储到 cookie 中：
Cookies.set('username', '张三')然后，在其他需要读取用户信息的组件中，可以使用以下代码读取 cookie：
let username = Cookies.get('username')如果需要删除 cookie，可以使用以下代码：
Cookies.remove('username')什么是 token？
Token 是一种用于身份认证的令牌，通常生成的方式是在用户登录之后，服务器为该用户生成一个 token，该 token 包含了该用户的身份信息，然后将该 token 返回给客户端，客户端每次请求需要身份认证的接口时，都需要将该 token 附加在请求头或请求参数中。
在 Vue.js 中，可以将 token 存储在 localStorage 或者 sessionStorage 中，并将其附加在请求头或请求参数中。具体实现可以参考以下代码：
// 将 token 存储到 localStorage 中
localStorage.setItem('token', 'abcdefg')
// 在请求头中附加 token
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')需要注意的是，存储在 localStorage 中的 token 可能会被其他网站的脚本访问到，从而导致安全问题。因此，建议将 token 存储在 sessionStorage 中，这样当用户关闭浏览器后，该 token 就会被删除。
总结
本文介绍了如何使用第三方库 js-cookie 和 Vue.js 自带的 localStorage 和 sessionStorage 来处理 cookie 和 token。在实际项目中，需要根据实际需求来选择合适的方案。同时，为了保证安全性，需要注意在存储 token 时采取一定的安全措施，比如加密等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f27cf3f6b2d6eab3c22b3d