【前端权限】接口权限与接口拦截器

原创于 2025-12-13 06:00:00 发布 · 664 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #前端权限 #请求拦截器 #响应拦截器 #前后端协作 #数据安全

前端业务实践专栏收录该内容

82 篇文章

订阅专栏

🌋 接口权限与接口拦截器

🌟 引言

在现代前端应用中，接口权限控制是保障系统安全的重要环节。老曹在多年的企业项目实践中发现，通过请求拦截器注入权限标识和响应拦截器处理无权访问错误，可以显著提升系统的安全性和用户体验。本节课将围绕接口权限的实现展开，重点讲解如何利用Axios等HTTP库的拦截器功能来管理接口权限。

💡 老曹提示
接口权限不仅关乎数据的安全性，更是前后端协作的关键点。例如，在一个财务系统中，未授权用户尝试访问敏感接口时，应立即返回错误并阻止操作。

🎯 学习目标

理解接口权限的核心概念及其重要性。
掌握使用请求拦截器注入权限标识的方法。
学会通过响应拦截器处理无权访问错误。
熟悉前后端协作的接口权限设计方案。
能够独立完成接口权限与拦截器的开发与调试。

📚 一、接口权限概述

🔹 1.1 接口权限的定义与分类

接口权限是指对用户调用后端接口的权限进行限制，确保用户只能访问其权限范围内的接口。根据粒度不同，接口权限可以分为以下几类：

全局权限：所有用户均可访问的公共接口。
角色权限：仅特定角色可访问的接口。
Token权限：基于JWT或其他令牌验证的接口权限。
IP白名单：仅允许特定IP地址访问的接口。

🔹 1.2 应用场景分析

接口权限广泛应用于各类中后台管理系统，常见场景包括：

敏感操作保护：如“删除用户”、“修改配置”等接口。
数据隔离：如仅允许查看本部门数据的接口。
第三方集成：如OAuth登录接口的权限校验。

🛠️ 二、请求拦截器注入权限标识

🔹 2.1 请求拦截器的设计思路

请求拦截器的核心功能是在每次HTTP请求发送前，动态注入权限标识（如Token或角色信息）。以下是实现步骤：

获取权限标识：从全局状态（如Vuex、Pinia或Redux）中读取用户的权限信息。
注入权限标识：将权限标识添加到请求头或请求参数中。
统一管理：集中处理权限标识的注入逻辑，避免分散在各个接口调用中。

🔸 2.1.1 示例代码解析

// Axios 请求拦截器示例
import axios from 'axios';
import store from '@/store'; // 假设权限信息存储在 Vuex 中

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 请求拦截器
instance.interceptors.request.use((config) => {
  const token = store.state.user.token; // 获取用户 Token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`; // 注入 Token
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

🔸 2.1.2 在组件中使用

// 组件中调用接口
export default {
  methods: {
    async fetchData() {
      try {
        const response = await instance.get('/api/data');
        console.log(response.data);
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    },
  },
};

🛠️ 三、响应拦截器处理无权访问错误

🔹 3.1 响应拦截器的设计思路

响应拦截器的核心功能是捕获后端返回的无权访问错误，并进行统一处理。以下是实现步骤：

捕获错误状态码：识别常见的无权访问状态码（如401和403）。
跳转登录页：对于401错误，通常需要跳转到登录页面重新认证。
提示用户：对于403错误，显示友好的提示信息。
日志记录：记录无权访问的接口调用，便于后续审计。

🔸 3.1.1 示例代码解析

// Axios 响应拦截器示例
import router from '@/router'; // 假设使用 Vue Router

// 响应拦截器
instance.interceptors.response.use((response) => {
  return response;
}, (error) => {
  if (error.response) {
    const { status } = error.response;

    if (status === 401) {
      // Token 过期或无效，跳转到登录页
      router.push('/login');
    } else if (status === 403) {
      // 无权访问，提示用户
      alert('您没有权限访问此资源');
    }
  }

  return Promise.reject(error);
});

🔸 3.1.2 在组件中使用

// 组件中调用接口
export default {
  methods: {
    async fetchData() {
      try {
        const response = await instance.get('/api/protected-data');
        console.log(response.data);
      } catch (error) {
        console.error('Error:', error);
      }
    },
  },
};

🧩 四、前后端协作的接口权限设计

🔹 4.1 权限标识的传递方式

前后端协作时，权限标识通常通过以下方式传递：

请求头：如Authorization: Bearer <token>。
请求参数：如?token=<token>。
Cookie：自动携带权限标识。

🔹 4.2 后端接口权限校验

后端在接收到请求后，需对权限标识进行校验。例如：

// Node.js + Express 示例
app.get('/api/protected-data', (req, res) => {
  const token = req.headers.authorization?.split(' ')[1];

  if (!isValidToken(token)) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  if (!hasPermission(token, 'view_protected_data')) {
    return res.status(403).json({ message: 'Forbidden' });
  }

  // 返回受保护的数据
  res.json({ data: 'Sensitive information' });
});