一、什么是token
token，也叫令牌，是一种访问令牌，用于保证用户在客户端和服务器端之间进行操作时的安全性。在vue中，token可以用来验证用户的身份，用来识别用户是否有访问权限。
二、使用vueaxios添加token
vueaxios是vue.js的一个插件，用于与后端api进行通信。我们可以使用vueaxios在vue应用程序中添加token。下面是添加token的代码示例：
import vue from 'vue';import axios from 'axios';import vueaxios from 'vue-axios';vue.use(vueaxios, axios);// 设置tokenconst token = 'your_token_here';vue.axios.defaults.headers.common['authorization'] = `bearer ${token}`;
在上述示例中，我们首先引入axios和vueaxios，然后使用vue.use()方法将它们注册到vue实例中。接下来我们设置token，使用vue.axios.defaults.headers.common['authorization'] = bearer ${token}来设置请求头，bearer是一款oauth2.0协议中的一种授权方式，用于获取授权后访问受保护资源。
三、使用vue-auth插件添加token
vue-auth是一个vue.js插件，它提供了一些方法，可以让你轻松添加身份验证和授权功能。该插件支持多种身份验证模式，包括jwt、oauth2.0等。下面是使用vue-auth插件添加token的代码示例：
import vue from 'vue';import vueauth from '@websanova/vue-auth';import axios from 'axios';vue.use(vueauth, { auth: { request: function (req, token) { if(token){ this.options.http._setheaders.call(this, req, {authorization: 'bearer ' + token}) } }, response: function (res) { var token = res.data.token; if(token){ return token; } } }});// 设置tokenconst token = 'your_token_here';vue.auth.token.set(token);
在上述示例中，我们首先引入vueauth和axios。接着，使用vue.use()方法将vueauth注册到vue实例中，同时配置身份验证选项。request选项用于设置请求头，response选项用于设置服务器响应，当成功获取到token时，将其保存。
最后，我们使用vue.auth.token.set(token)方法将token保存到vue实例中，以供全局使用。
四、使用cookies保存token
除了使用vueaxios和vue-auth插件，我们还可以使用cookies来保存token。在vue中，我们可以使用vue-cookies插件来对cookies进行操作。下面是在vue中使用cookies来存储token的代码示例：
import vue from 'vue';import vuecookies from 'vue-cookies';vue.use(vuecookies);// 设置tokenconst token = 'your_token_here';vue.$cookies.set('token', token);
在上述示例中，我们首先引入vuecookies插件。然后使用vue.use()方法注册它。最后，使用vue.$cookies.set()方法来保存token到cookies中。此时，我们可以在全局范围内通过访问$cookies来获取存储在cookies中的token。
总结：
vue框架提供了多种添加token的方式，开发者可以根据实际需求来选择。无论是使用vueaxios、vue-auth插件，还是使用cookies，我们都需要保证token的安全性，并定期进行更新和验证。同时，如何在vue应用中添加token也是前端开发工程师需要掌握的基本技能之一。
以上就是vue怎样添加token的详细内容。