Angular 12.2.14中如何实现Metamask钱包断开连接功能？

Metamask官方并未提供主动断开钱包的API，因此断开逻辑需要结合前端本地状态清理和监听钱包端事件同步状态两部分实现，具体步骤如下：

1. 实现前端断开方法 #

该方法负责清理本地存储的钱包信息、重置相关状态：

async disconnectWallet() {
  // 清空组件内的选中地址状态
  this.selectedAddress = null;
  // 清除本地存储的钱包地址（如果连接时存过）
  localStorage.removeItem('connectedWalletAddress');
  // 若初始化过web3实例，也一并重置
  if (this.web3) {
    this.web3 = null;
  }
}

2. 监听Metamask端的状态变更 #

用户可能会在Metamask钱包内手动断开网站授权或切换账户，需要监听这些事件同步前端状态：

ngOnInit() {
  if (window.ethereum) {
    // 监听账户变更事件
    window.ethereum.on('accountsChanged', (accounts: string[]) => {
      if (accounts.length === 0) {
        // 账户为空，说明钱包已断开
        this.disconnectWallet();
      } else {
        // 切换了账户，更新选中地址
        this.selectedAddress = accounts[0];
        localStorage.setItem('connectedWalletAddress', accounts[0]);
      }
    });

    // 可选：监听链变更事件，链切换后可重置状态
    window.ethereum.on('chainChanged', () => {
      this.selectedAddress = null;
      localStorage.removeItem('connectedWalletAddress');
    });
  }
}

3. 组件销毁时移除事件监听 #

避免内存泄漏，在组件销毁钩子中移除监听：

ngOnDestroy() {
  if (window.ethereum) {
    window.ethereum.removeListener('accountsChanged', () => {});
    window.ethereum.removeListener('chainChanged', () => {});
  }
}

优化连接方法（可选） #

连接钱包时把地址存入本地存储，页面刷新后可自动恢复状态：

async connectWallet() {
  try {
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts',
    });
    this.selectedAddress = accounts[0];
    localStorage.setItem('connectedWalletAddress', accounts[0]);
  } catch (error) {
    console.error('钱包连接失败:', error);
  }
}

注意事项 #

• 前端的断开操作仅清理本地状态，用户若要彻底解除网站与钱包的授权，需在Metamask的「已连接的网站」设置中手动移除。

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