后端鉴权返回403，前端怎么统一处理权限不足的情况？

Prog.爱香提问于 2026-03-17 18:48:22 阅读 36

安全

我在做后台管理系统，接口权限由后端控制。当用户没权限时，后端直接返回403状态码。现在每个请求都要单独判断是不是403，太麻烦了，有没有办法全局拦截并统一跳转到无权限页面？

我试过在 axios 的响应拦截器里处理，但不确定是不是最佳实践，而且有时候还会漏掉一些边界情况。

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 403) {
      router.push('/no-permission');
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

我来解答赞 2 收藏

反馈

1 条解答

码农美荣 Lv1

你用的拦截器思路是对的，这确实是业界标准做法。不过你的代码有几个坑要填：

第一，error.response可能是undefined。比如用户手动取消请求、或者网络断开时，error.response就是undefined，你直接访问error.response.status会崩。改成error.response?.status === 403或者error.response && error.response.status === 403。

第二，死循环问题。如果你的403是在token刷新接口返回的，那就会陷入无限跳转。最好把需要跳转403的接口排除掉，比如登录接口、刷新token接口这些不要做跳转处理。

第三，可以配合路由守卫一起用。在router.beforeEach里判断全局状态也行，但拦截器更直接，因为它是真正在请求层面拦截的。

完整一点的写法大概这样：

// 白名单，这些接口403不跳转

const skipAuthUrls = ['/api/refresh-token', '/api/login'];



axios.interceptors.response.use(

  response => response,

  error => {

    // 请求被取消等情况没有response

    if (!error.response) {

      return Promise.reject(error);

    }

    

    // 在白名单中的接口不处理

    const url = error.config.url;

    if (skipAuthUrls.some(u => url.includes(u))) {

      return Promise.reject(error);

    }

    

    if (error.response.status === 403) {

      // 清除本地token

      localStorage.removeItem('token');

      // 跳转前可以存一下当前路径，登录后回来

      router.push({ path: '/no-permission', query: { from: router.currentRoute.fullPath } });

    }

    

    return Promise.reject(error);

  }

);

其实还有更省心的做法：后端返回403的时候，顺便在body里返回一个特定字段，前端统一解析这个字段来判断要不要跳转。这样即使状态码不是403（比如200但业务层判断无权限）也能统一处理。不过这得后端配合改，你就先这样吧。

2026-03-17 20:02