使用 fetch API 处理 403 错误与使用 Axios 类似，但需要手动检查响应状态。以下是一些最佳实践和示例，展示如何在使用 fetch 时优雅地处理 403 错误。
1. 基本的 Fetch 请求
首先，您需要进行一个基本的 fetch 请求，并检查响应的状态码。
示例请求
fetch('/api/protected-resource').then(response => {if (response.status === 403) {// 处理 403 错误handleForbidden();return;}if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => {// 处理成功的响应数据console.log(data);}).catch(error => {console.error('Fetch error:', error);});
2. 创建一个处理 403 错误的函数
可以将处理 403 错误的逻辑封装到一个函数中，以便在多个地方重用。
示例处理函数
function handleForbidden() {// 这里可以更新 Vuex 状态、导航到 403 页面等console.log("您没有权限访问此页面。");// 例如，导航到 403 页面window.location.href = '/forbidden'; // 或使用 Vue Router 进行导航
}
3. 使用 async/await
使用 async/await 可以使代码更简洁和易读。
示例使用 async/await
async function fetchProtectedResource() {try {const response = await fetch('/api/protected-resource');if (response.status === 403) {handleForbidden();return;}if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json();console.log(data);} catch (error) {console.error('Fetch error:', error);}
}
4. 在 Vue 组件中使用 Fetch
在 Vue 组件中，可以使用 fetch 进行 API 请求，并处理 403 错误。
示例 Vue 组件
<template><div><h1>Protected Resource</h1><button @click="loadResource">加载资源</button><p v-if="error">{{ error }}</p></div>
</template><script>
export default {data() {return {error: null};},methods: {async loadResource() {this.error = null; // 重置错误状态try {const response = await fetch('/api/protected-resource');if (response.status === 403) {this.handleForbidden();return;}if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json();console.log(data); // 处理成功的响应数据} catch (err) {this.error = '发生错误: ' + err.message;}},handleForbidden() {this.error = '您没有权限访问此资源。';// 可以在这里导航到 403 页面// this.$router.push({ name: 'Forbidden' });}}
}
</script>
5. 处理全局错误
如果您需要在整个应用中处理 403 错误，可以创建一个全局的错误处理机制。
示例全局错误处理
在应用的入口文件中（如 main.js），您可以创建一个全局的 fetch 代理：
const originalFetch = window.fetch;window.fetch = async (...args) => {const response = await originalFetch(...args);if (response.status === 403) {handleForbidden();}return response;
};function handleForbidden() {console.log("您没有权限访问此页面。");// 例如，导航到 403 页面window.location.href = '/forbidden';
}
总结
使用 fetch 处理 403 错误需要手动检查响应状态，并根据需要进行处理。通过封装处理逻辑、使用 async/await 和在 Vue 组件中合理使用 fetch，您可以优雅地管理未授权访问。此外，创建全局的错误处理机制，可以进一步提升用户体验