vue中的使用token的方法示例

当应用程序需要进行用户验证时，可以使用token来进行身份认证。Vue.js作为一种流行的前端框架，也支持使用token进行身份验证。现在让我们一起来学习如何在Vue.js应用程序中使用token进行身份认证。

步骤一：生成token

生成token的方法多种多样，这里我们使用jsonwebtoken来生成一个token值。

const jwt = require('jsonwebtoken');
const token = jwt.sign({username: 'user123', role: 'admin'}, 'my-secret-key');
console.log(token);

上述代码会生成一个token值，其中包含了一个对象数据{username: 'user123', role: 'admin'}以及一个密钥'my-secret-key'。我们可以通过解密token值来获得这个对象数据。

步骤二：将token存储在localStorage中

在Vue.js应用程序中，可以使用localStorage来存储token。

localStorage.setItem('token', token);

在上述代码中，我们将生成的token值存储在localStorage的'key'为'token'的项中。

步骤三：发送需要token认证的请求

在发送需要进行token认证的请求时，可以在请求头中加上'Authorization'这个字段，并将token值赋值给'Authorization'字段的值。下面是一个使用axios库向服务器发送带有token的请求的例子。

import axios from 'axios';
const token = localStorage.getItem('token');
const headers = { Authorization: `Bearer ${token}` };

axios.get('/api/user', { headers })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在上述代码中，我们首先从localStorage中获取保存的token值，然后将其赋值给请求头中的'Authorization'字段。当向服务器发送'/api/user'的GET请求时，服务器会从请求头中获取Authorization字段的值并验证其有效性。

示例2： 在路由拦截中使用token进行身份认证

Vue.js提供了一种路由拦截的方式来进行权限控制。下面是一个需要进行身份认证的路由拦截的示例。

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (!token && to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
})

在上述代码中，我们每次路由变化时都会检查localStorage中是否有保存的token值。如果没有token值并且用户不在登录页面，则路由被重定向到登录页面。

通过上述两个示例，可以看出Vue.js中使用token进行身份认证的简单方法。当需要进行用户验证时，使用localStorage存储token，然后在发送请求时在请求头中使用'Authorization'字段将token值发送到服务器进行验证。此外，我们也可以使用路由拦截的方式进行身份认证。