当前位置：首页 > VUE

vue实现摘要认证

2026-01-16 07:26:26VUE

Vue 实现摘要认证的方法

在 Vue 中实现摘要认证（Digest Authentication）通常涉及与后端的交互，前端主要负责处理认证流程和存储凭证。以下是具体实现步骤：

安装必要的依赖

确保项目已安装 axios 用于 HTTP 请求，以及 js-sha256 或类似库用于哈希计算：

npm install axios js-sha256

封装认证逻辑

创建一个工具类（如 auth.js）处理摘要认证的核心逻辑：

import axios from 'axios';
import { sha256 } from 'js-sha256';

// 生成摘要认证的响应值
function generateDigestResponse(username, password, realm, nonce, method, uri) {
  const ha1 = sha256(`${username}:${realm}:${password}`);
  const ha2 = sha256(`${method}:${uri}`);
  return sha256(`${ha1}:${nonce}:${ha2}`);
}

// 发起认证请求
export async function digestAuthRequest(url, method, username, password) {
  try {
    // 首次请求获取服务器挑战（nonce/realm）
    const challengeResponse = await axios.get(url, { validateStatus: false });
    if (challengeResponse.status !== 401) {
      throw new Error('Unexpected response status');
    }

    const authHeader = challengeResponse.headers['www-authenticate'];
    const realm = authHeader.match(/realm="([^"]+)"/)[1];
    const nonce = authHeader.match(/nonce="([^"]+)"/)[1];

    // 生成认证响应
    const uri = new URL(url).pathname;
    const response = generateDigestResponse(username, password, realm, nonce, method.toUpperCase(), uri);

    // 携带认证头重新请求
    const authString = `Digest username="${username}", realm="${realm}", nonce="${nonce}", uri="${uri}", response="${response}"`;
    const authenticatedResponse = await axios({
      method,
      url,
      headers: { Authorization: authString }
    });

    return authenticatedResponse.data;
  } catch (error) {
    console.error('Authentication failed:', error);
    throw error;
  }
}

在 Vue 组件中使用

在组件中调用封装好的认证方法：

import { digestAuthRequest } from '@/utils/auth';

export default {
  methods: {
    async login() {
      try {
        const data = await digestAuthRequest(
          'https://api.example.com/protected',
          'GET',
          'your_username',
          'your_password'
        );
        console.log('Authenticated data:', data);
      } catch (error) {
        alert('Authentication failed');
      }
    }
  }
}

处理认证状态

结合 Vuex 或 Pinia 管理全局认证状态：

// store/auth.js (Pinia 示例)
import { defineStore } from 'pinia';
import { digestAuthRequest } from '@/utils/auth';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isAuthenticated: false,
    user: null
  }),
  actions: {
    async login(username, password) {
      const data = await digestAuthRequest(
        '/api/auth',
        'POST',
        username,
        password
      );
      this.isAuthenticated = true;
      this.user = data.user;
    }
  }
});