Angular中如何保护凭证？含Firebase及SQL服务场景咨询

嘿，这个问题问到点子上了——毕竟Angular是纯客户端框架，所有代码最终都会打包发送给用户，直接把数据库凭证写在前端代码里简直是把钥匙递到别人手里，绝对不行！下面给你几个业界常用的靠谱方案，帮你安全处理这类需求：

1. 搭建后端API中间层（最通用的方案） #

核心思路是用后端服务做“中间人”：把所有数据库操作逻辑封装在后端（比如Node.js/Express、Java Spring Boot、Python FastAPI都可以），Angular前端只和这个后端API通信，完全碰不到数据库凭证。

举个简单的Node.js+MySQL例子：

后端代码（Node.js/Express） #

const express = require('express');
const mysql = require('mysql2');
require('dotenv').config(); // 用dotenv加载环境变量

const app = express();
// 从环境变量读取数据库凭证，绝对不要硬编码！
const dbConnection = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME
});

// 封装一个查询接口
app.get('/api/orders', (req, res) => {
  // 这里可以先验证用户权限（比如检查请求头里的JWT）
  dbConnection.query('SELECT * FROM orders WHERE user_id = ?', [req.user.id], (err, results) => {
    if (err) {
      res.status(500).json({ error: '查询失败' });
      return;
    }
    res.json(results);
  });
});

app.listen(3000, () => console.log('后端API启动在3000端口'));

前端Angular代码 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class OrderService {
  constructor(private http: HttpClient) {}

  getOrders() {
    // 带上用户的鉴权令牌（比如JWT）
    const headers = new HttpHeaders().set('Authorization', `Bearer ${localStorage.getItem('token')}`);
    return this.http.get('/api/orders', { headers });
  }
}

注意：后端的数据库凭证一定要存在环境变量（比如.env文件）里，并且把.env加入.gitignore，绝对不能提交到代码仓库！

2. 使用Serverless函数（轻量无服务器方案） #

如果不想维护完整的后端服务器，可以用Serverless函数（比如AWS Lambda、Google Cloud Functions、Vercel Edge Functions）。本质和API中间层一样，只是把后端逻辑拆成一个个独立的函数，不用自己管服务器运维。

比如写一个AWS Lambda函数来处理SQL查询，Angular前端直接调用这个函数的URL，函数内部用环境变量存储的凭证去连接数据库，执行操作后返回结果。这种方案成本低、扩展性好，适合小型项目或者需求简单的场景。

3. 用托管的数据库API服务（懒人友好方案） #

很多云数据库服务商提供了现成的API层，比如Supabase（基于PostgreSQL）、Hasura、Firebase Realtime Database的SQL扩展。这些服务会帮你处理凭证管理、鉴权、权限控制，你只需要在Angular里用他们提供的客户端SDK/密钥（注意是专门给前端用的受限密钥，不是管理员密钥）来调用API。

比如Supabase的Angular集成：

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('你的Supabase URL', '你的客户端公钥');

// 查询数据，Supabase会在后台安全处理数据库连接
async function getOrders() {
  const { data, error } = await supabase.from('orders').select('*');
  if (error) console.error(error);
  return data;
}

这类服务已经帮你做好了安全防护，你只需要配置好用户权限规则，不用自己写后端代码。

4. 前端只做鉴权，后端管控权限 #

不管用哪种方案，都要记住：前端只负责用户身份验证，后端才负责权限校验和数据库操作。比如用户登录后拿到JWT令牌，前端每次调用API时把JWT放在请求头里，后端先验证JWT的有效性，再检查用户是否有操作该数据的权限，最后才执行数据库读写。这样就算JWT泄露，攻击者也只能拿到该用户的权限，不会直接获取到数据库的超级权限。

内容的提问来源于stack exchange，提问作者Jerry