Angular 12 读取JSON文件凭证实现内部应用基础登录功能咨询

• 仅用于内部非敏感场景、只有基础登录需求的前提下，用读取本地JSON文件做身份校验是完全可行的，但注意该方案安全性极低，绝对不能用于公网对外服务，也不要存储敏感业务相关的账号凭证。
• 你提供的原JSON存在语法错误，credentials字段应该对应数组而非多个并列对象，修正后的合法JSON如下：

{
  "credentials": [
    {
      "username": "user1",
      "password": "pass1"
    },
    {
      "username": "user2",
      "password": "pass2"
    },
    {
      "username": "user3",
      "password": "pass3"
    }
  ]
}

1. 后端Auth服务逻辑 #

服务启动时预读取JSON凭证到内存，接收前端传入的账号密码后做匹配校验，返回登录结果：

const fs = require('fs')
const path = require('path')

// 启动时预加载凭证数据，避免每次请求都读磁盘
const credentialPath = path.join(__dirname, './credentials.json')
let credentialList = []
try {
  const fileContent = fs.readFileSync(credentialPath, 'utf-8')
  credentialList = JSON.parse(fileContent).credentials
} catch (err) {
  console.error('凭证文件读取失败：', err)
}

// 登录接口校验逻辑
function loginVerify(req, res) {
  const { username, password } = req.body
  const matchedUser = credentialList.find(item => 
    item.username === username && item.password === password
  )
  if (matchedUser) {
    // 登录成功，可返回自定义会话标识
    return res.json({ code: 200, msg: '登录成功', token: `internal_login_${username}_${Date.now()}` })
  } else {
    return res.json({ code: 401, msg: '账号或密码错误' })
  }
}

2. 前端Login组件逻辑 #

表单收集用户输入的账号密码，调用后端登录接口，校验通过后存储登录标识跳转业务页：

<template>
  <div class="login-container">
    <input v-model="loginForm.username" placeholder="请输入用户名" />
    <input v-model="loginForm.password" type="password" placeholder="请输入密码" />
    <button @click="handleLogin">确认登录</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const loginForm = ref({
  username: '',
  password: ''
})

const handleLogin = async () => {
  const res = await axios.post('/api/login', loginForm.value)
  if (res.data.code === 200) {
    localStorage.setItem('internal_login_token', res.data.token)
    // 跳转到业务首页
    location.href = '/dashboard'
  } else {
    alert(res.data.msg)
  }
}
</script>

• 不要把凭证JSON文件放在前端可直接访问的静态资源目录，避免被直接下载泄露账号
• 有条件的话建议对JSON里的密码做哈希加密存储，校验时也把前端传的密码做相同哈希后再匹配，避免明文存储密码泄露风险
• 该方案仅适用于无敏感数据的内部小工具，但凡涉及敏感数据、外部用户访问的场景，必须使用专业的身份认证服务
• 如果是无后端的纯前端静态工具，也可以直接把凭证JSON内置在前端代码中，但该方式所有访问用户都可以通过调试页面源码拿到所有账号密码，仅可用于完全无保密需求的测试类工具

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