如何使用 Vue.js 和 Axios 处理 401 错误重定向？
2024-03-04 23:06:47
在 Vue.js 应用中，结合 Axios 处理 401 错误，并实现自动跳转到登录页面的功能，是前后端分离项目中常见的需求。如果处理不当，很容易导致用户体验不佳，甚至出现页面卡死或无限循环跳转的问题。
首先，我们需要了解 401 错误的含义。当服务器返回 401 错误时，表示用户没有提供有效的身份验证凭据，或者提供的凭据已过期或无效。这时，我们需要将用户引导到登录页面，以便他们重新登录。
在 Vue.js 中，我们可以利用 Axios 的拦截器机制来捕获 401 错误。拦截器允许我们在请求发送前或响应返回后执行一些自定义逻辑。我们可以创建一个响应拦截器，专门处理 401 错误。
// 在 main.js 或其他合适的位置添加拦截器
import axios from 'axios';
import router from './router'; // 导入 Vue Router 实例
axios.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// 清除本地存储的用户信息（例如 token）
localStorage.removeItem('token');
// 跳转到登录页面
router.push('/login');
}
return Promise.reject(error);
}
);
这段代码中，我们首先判断错误响应的状态码是否为 401。如果是，则清除本地存储的用户信息（例如 token），然后使用 router.push('/login') 方法跳转到登录页面。
需要注意的是，router.push('/login') 方法是异步的，它不会立即跳转到登录页面。因此，我们需要将 return Promise.reject(error) 放在跳转语句之后，以确保错误能够被正确处理。
此外，我们还需要在登录页面处理登录成功后的逻辑。当用户成功登录后，我们需要将用户重定向到他们之前尝试访问的页面。
// 在登录页面组件中
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const handleLogin = async () => {
// ... 登录逻辑 ...
// 登录成功后，获取之前尝试访问的页面路径
const redirectPath = router.currentRoute.value.query.redirect || '/';
// 跳转到目标页面
router.push(redirectPath);
};
return { handleLogin };
}
};
在这段代码中，我们使用 router.currentRoute.value.query.redirect 获取之前尝试访问的页面路径。如果该路径不存在，则默认为首页 /。然后，我们使用 router.push() 方法跳转到目标页面。
为了实现这个功能，我们需要在拦截器中将目标页面路径作为查询参数添加到跳转 URL 中。
// 在拦截器中
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
这样，当用户在登录页面成功登录后，就可以自动跳转到他们之前尝试访问的页面了。
常见问题解答
Q1: 如果用户没有登录，直接访问需要登录才能访问的页面，会发生什么？
A1: 当用户没有登录，直接访问需要登录才能访问的页面时，服务器会返回 401 错误。拦截器会捕获这个错误，清除本地存储的用户信息，并将用户重定向到登录页面。登录页面会显示登录表单，用户需要输入用户名和密码才能登录。
Q2: 如果用户在登录页面输入错误的用户名或密码，会发生什么？
A2: 如果用户在登录页面输入错误的用户名或密码，服务器会返回登录失败的错误信息。登录页面会显示错误信息，用户需要重新输入用户名和密码。
Q3: 如果用户在登录页面成功登录，会发生什么？
A3: 如果用户在登录页面成功登录，服务器会返回登录成功的响应，并将用户的身份验证信息（例如 token）存储在本地存储中。登录页面会将用户重定向到他们之前尝试访问的页面。
Q4: 如果用户在登录后访问需要登录才能访问的页面，会发生什么？
A4: 如果用户在登录后访问需要登录才能访问的页面，服务器会检查用户提供的身份验证信息（例如 token）。如果身份验证信息有效，服务器会返回请求的数据。如果身份验证信息无效，服务器会返回 401 错误，拦截器会捕获这个错误，清除本地存储的用户信息，并将用户重定向到登录页面。
Q5: 如果用户手动退出登录，会发生什么？
A5: 如果用户手动退出登录，应用程序会清除本地存储的用户信息（例如 token），并将用户重定向到登录页面。
