Vue.js 中使用 axios 拦截器实现权限控制详解-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中，我们通常会使用 axios 库来进行 HTTP 请求。而在实际开发中，我们经常需要对请求进行一些额外的操作，比如添加请求头、处理错误等。这时候，我们可以使用 axios 的拦截器来实现这些操作。本文将介绍如何在 Vue.js 中使用 axios 拦截器来实现权限控制。

什么是拦截器

拦截器是 axios 提供的一种机制，可以在请求和响应被处理前对它们进行拦截。拦截器可以对请求和响应进行一些额外的操作，比如添加请求头、处理错误等。

axios 提供了两种拦截器：请求拦截器和响应拦截器。请求拦截器会在请求被发送之前执行，而响应拦截器会在响应被处理之前执行。

实现权限控制

在实际开发中，我们通常会需要对请求进行权限控制。比如，我们需要对某些请求进行身份验证，只有在用户登录的情况下才能进行访问。这时候，我们可以使用 axios 的拦截器来实现这个功能。

首先，我们需要在请求头中添加一些信息，比如用户的身份信息。我们可以在请求拦截器中添加这些信息：

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

在上面的代码中，我们首先从本地存储中获取用户的身份信息（这里假设我们将用户的身份信息保存在了本地存储中）。然后，我们将这些信息添加到请求头中，以便服务器进行身份验证。

接下来，我们需要对响应进行处理。如果用户没有登录，服务器会返回一个 401 错误。我们可以在响应拦截器中对这个错误进行处理：

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    // 用户未登录，进行相应处理
  }
  return Promise.reject(error)
})

在上面的代码中，我们首先判断响应的状态码是否为 401。如果是，说明用户没有登录，我们可以进行相应的处理，比如跳转到登录页面。最后，我们需要返回一个 rejected 状态的 Promise，以便后续的处理。

示例代码

下面是一个完整的示例代码，演示如何在 Vue.js 中使用 axios 拦截器实现权限控制：

// javascriptcn.com 代码示例
import axios from 'axios'

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

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    // 用户未登录，进行相应处理
  }
  return Promise.reject(error)
})

export default axios

在上面的代码中，我们首先导入 axios 库。然后，我们使用 axios 的拦截器来实现权限控制。在请求拦截器中，我们从本地存储中获取用户的身份信息，并将其添加到请求头中。在响应拦截器中，我们判断响应的状态码是否为 401，如果是，说明用户没有登录，我们可以进行相应的处理。

总结

在 Vue.js 中使用 axios 拦截器可以方便地对请求和响应进行额外的操作。在本文中，我们介绍了如何使用 axios 拦截器实现权限控制，以及如何在拦截器中添加请求头、处理错误等操作。希望本文对您有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65684589d2f5e1655d10da77