vue登陆时必备的拦截器设置详解

在Vue项目中，登录拦截器是确保用户身份验证和权限管理的关键步骤。1、添加全局导航守卫，2、设置Axios请求拦截器，3、处理响应拦截器。通过这三个步骤，可以有效地管理用户访问权限，确保未登录用户不能访问受保护的页面。

一、添加全局导航守卫

在Vue项目中，全局导航守卫主要用于控制路由访问权限。在router/index.js中，添加以下代码：

router.beforeEach((to, from, next) => {

  // 获取用户令牌
  const token = localStorage.getItem('token');
  // 检查目标路由是否需要身份验证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (token) {
      // 用户已登录，继续导航
      next();
    } else {
      // 用户未登录，重定向到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    }
  } else {
    // 目标路由不需要身份验证，继续导航
    next();
  }
});

解释：

• to.matched.some(record => record.meta.requiresAuth)：检查目标路由是否需要身份验证。
• localStorage.getItem('token')：从本地存储中获取用户令牌。
• 如果用户未登录且目标路由需要验证，则重定向到登录页面。

二、设置Axios请求拦截器

请求拦截器用于在每个请求发送之前添加必要的认证信息。在src/axios.js中，添加以下代码：

import axios from 'axios';

axios.interceptors.request.use(
  config => {
    // 获取用户令牌
    const token = localStorage.getItem('token');
    // 如果令牌存在，将其添加到请求头中
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

解释：

• axios.interceptors.request.use：设置请求拦截器。
• config.headers.Authorization = Bearer ${token}“：将令牌添加到请求头中。

三、处理响应拦截器

响应拦截器用于处理请求返回的响应数据，特别是处理身份验证失败的情况。在src/axios.js中，添加以下代码：

axios.interceptors.response.use(

  response => {
    return response;
  },
  error => {
    // 如果返回401未授权状态码，则重定向到登录页面
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      router.replace({
        path: '/login',
        query: { redirect: router.currentRoute.fullPath }
      });
    }
    return Promise.reject(error);
  }
);

解释：

• axios.interceptors.response.use：设置响应拦截器。
• error.response.status === 401：检查响应状态码是否为401未授权。
• 清除本地存储中的令牌，并重定向到登录页面。

总结

通过以上步骤，可以在Vue项目中有效地添加登录拦截器，确保用户的身份验证和权限管理。通过全局导航守卫控制路由访问权限；通过Axios请求拦截器在每个请求中添加必要的认证信息；最后，通过响应拦截器处理身份验证失败的情况。建议在实际项目中，根据具体需求进一步优化和扩展这些拦截器，以满足不同场景的需求。

更多问答FAQs：

1. 为什么需要添加拦截器来处理登录？
在Vue中，拦截器是一种非常有用的工具，可以在发送请求或接收响应之前对其进行预处理或后处理。在登录功能中，添加拦截器可以实现以下功能：

• 检查用户的登录状态，如果用户未登录，则拦截请求并跳转到登录页面。
• 在每个请求中添加登录凭证，确保请求被正确授权。
• 对响应进行处理，例如刷新登录凭证或检查响应状态码。

2. 如何添加拦截器来处理登录？
在Vue中，可以使用axios库来发送HTTP请求，并使用axios拦截器来处理登录。以下是添加拦截器的一般步骤：

• 在项目中安装axios库：可以使用npm或yarn命令来安装axios。
• 创建一个axios实例：可以在Vue的main.js文件中创建一个全局的axios实例，并配置一些默认设置，如请求的基础URL、超时时间等。
• 添加请求拦截器：使用axios的interceptors.request.use方法来添加请求拦截器，可以在拦截器中进行登录状态检查、添加登录凭证等操作。
• 添加响应拦截器：使用axios的interceptors.response.use方法来添加响应拦截器，可以在拦截器中处理响应，如刷新登录凭证、检查响应状态码等。

3. 添加登录拦截器的示例代码
以下是一个示例代码，展示了如何在Vue中使用axios拦截器来处理登录：

// main.js
import Vue from 'vue';
import axios from 'axios';

// 创建一个全局的axios实例
const axiosInstance = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 5000,
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 在请求发送之前进行登录状态检查
  if (!isLoggedIn()) {
    // 未登录，跳转到登录页面
    router.push('/login');
    return Promise.reject('未登录');
  }

  // 添加登录凭证
  config.headers.Authorization = getAuthToken();

  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 刷新登录凭证
  refreshAuthToken(response);

  // 处理响应
  return response;
}, error => {
  // 检查响应状态码
  if (error.response.status === 401) {
    // 未授权，跳转到登录页面
    router.push('/login');
  }

  return Promise.reject(error);
});

Vue.prototype.$http = axiosInstance;

以上是一个基本的示例，你可以根据自己的需求和后端接口的规范来进行适当的修改和扩展。通过添加拦截器，你可以更好地处理登录功能，并提供更好的用户体验。