Vue请求携带Token：轻松搞定请求认证！

2023-10-06 04:52:22

在 Vue 中轻松携带 Token 进行请求

在前端开发中，我们经常需要向后端发送请求以获取或更新数据。在某些情况下，这些请求需要包含一个 Token，该 Token 可以验证用户身份并授权他们访问受保护的资源。在 Vue 中，我们可以使用 axios 库轻松地发送请求并携带 Token。

方法一：使用 axios 拦截器

axios 拦截器是一种强大的机制，允许我们在发出请求之前或之后对其进行修改。我们可以利用拦截器来自动为每个请求添加 Token，如下所示：

import axios from 'axios'

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

方法二：手动设置请求头

如果我们不想使用拦截器，也可以在发送请求时手动设置请求头：

import axios from 'axios'

const token = localStorage.getItem('token');

axios({
  method: 'get',
  url: 'https://example.com/api/v1/users',
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

方法三：使用 Vuex 管理 Token

Vuex 是一个状态管理库，它可以帮助我们管理 Vue 应用程序中的状态。我们可以将 Token 信息存储在 Vuex 状态中，并在发送请求时从中获取它：

// store.js
const state = {
  token: null
};

// 组件中
import { mapGetters } from 'vuex'

computed: {
  ...mapGetters({
    token: 'getToken'
  })
}

methods: {
  sendGetRequest() {
    axios({
      method: 'get',
      url: 'https://example.com/api/v1/users',
      headers: {
        'Authorization': `Bearer ${this.token}`
      }
    });
  }
}

常见问题解答

1. 如何获取 Token？

获取 Token 的方法取决于你的后端实现。通常，你需要先向身份验证端点发送请求，并使用用户名和密码或其他凭据进行身份验证。如果身份验证成功，后端将返回一个 Token，你可以将其存储在本地存储或 cookie 中。

2. Token 的有效期是多久？

Token 的有效期由后端决定。它可以是一次性的，或者可以在一段时间内重复使用。请务必定期刷新 Token，以确保安全性和连续性。

3. 如何处理 Token 过期？

如果你收到一个 Token 过期的错误，则需要刷新 Token 并重试请求。你可以通过向身份验证端点发送另一个请求来刷新 Token。

4. 如何在 Vue 中全局设置 Token？

你可以使用一个 Vue 插件或在每个组件中设置 Token。对于全局设置，你可以在创建 Vue 实例时设置一个默认请求头：

new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    const token = localStorage.getItem('token');
    if (token) {
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }
  }
});

5. 如何在 Vue Router 中携带 Token？

Vue Router 允许你在导航守卫中设置 Token。这可以确保在用户导航到受保护的路由之前添加 Token 到请求中：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    next({ name: 'login' });
  } else if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    next();
  }
});