当前位置：首页 > VUE

vue实现摘要认证

2026-03-29 08:02:49VUE

摘要认证简介

摘要认证（Digest Authentication）是一种HTTP认证机制，比基本认证更安全。它通过哈希算法传输凭证，避免明文密码泄露。Vue作为前端框架，需结合后端服务实现完整流程。

后端服务配置

后端需支持摘要认证，常见方案如Nginx、Apache或Node.js中间件。以Node.js为例，使用http-auth模块：

vue实现摘要认证

const auth = require('http-auth');
const digest = auth.digest({
  realm: "Secure Area",
  file: __dirname + "/users.htdigest" // 密码文件路径
});

// 应用于Express路由
app.use(auth.connect(digest));

Vue前端实现

封装认证请求 使用Axios拦截器处理401响应，自动发起带认证头的请求：

vue实现摘要认证

import axios from 'axios';

let retryCount = 0;
const MAX_RETRY = 1;

axios.interceptors.response.use(null, async (error) => {
  if (error.response?.status === 401 && retryCount < MAX_RETRY) {
    retryCount++;
    const authHeader = error.response.headers['www-authenticate'];
    const credentials = await digestAuth('GET', '/api/data', authHeader);
    error.config.headers['Authorization'] = credentials;
    return axios.request(error.config);
  }
  return Promise.reject(error);
});

生成摘要凭证 实现RFC 2617规范的摘要计算：

async function digestAuth(method, uri, authHeader) {
  const params = parseAuthHeader(authHeader);
  const ha1 = md5(`${params.username}:${params.realm}:${password}`);
  const ha2 = md5(`${method}:${uri}`);
  const response = md5(`${ha1}:${params.nonce}:${params.nc}:${params.cnonce}:${params.qop}:${ha2}`);

  return `Digest username="${params.username}", realm="${params.realm}", nonce="${params.nonce}", uri="${uri}", qop=${params.qop}, nc=${params.nc}, cnonce="${params.cnonce}", response="${response}"`;
}