如何正确将MetaMask钱包与dApp断开连接 解决断开后仍显示连接问题

你之前使用的框架自带deactivate类方法，仅会清除dApp本地存储的钱包连接状态、断开当前页面与MetaMask Provider的RPC连接，不会触发MetaMask侧清除当前站点的钱包连接授权，因此MetaMask GUI会一直显示已连接状态，只要站点有自动重连逻辑，刷新页面就会恢复连接。

你提到的web3-react场景下刷新后dApp不显示连接，是因为web3-react默认未开启自动重连逻辑，但是MetaMask侧的站点授权依然存在，下次触发连接操作时无需用户二次确认授权，本质问题和useDapp场景一致。

所有兼容EIP-1193标准的钱包（包含MetaMask）都可以通过调用权限撤销接口实现双向完全断开，不需要依赖第三方web3框架的封装能力，操作步骤如下：

• 第一步：调用wallet_revokePermissions方法撤销当前站点的eth_accounts权限，主动通知MetaMask清除站点授权
• 第二步：调用对应框架的本地状态清除方法（如useDapp的deactivate、web3-react的disconnect），清空dApp侧的连接缓存

基础兼容代码示例（可适配任意web3框架） #

// 首先获取页面注入的MetaMask Provider
const provider = window.ethereum
if (provider) {
  try {
    // 撤销账户访问权限，触发MetaMask侧清除连接记录
    await provider.request({
      method: "wallet_revokePermissions",
      params: [
        {
          eth_accounts: {},
        },
      ],
    })
    // 这里补充你所用框架的断开逻辑，如useDapp的deactivate()
    deactivate()
  } catch (error) {
    console.error("撤销钱包授权失败：", error)
  }
}

useDapp场景完整修复示例 #

修改你提供的代码如下即可解决问题：

import React from 'react'
import { useEthers } from '@usedapp/core'

const TryUseDappExample = () => {
  const { activateBrowserWallet, deactivate, account } = useEthers()

  // 自定义双向完全断开方法
  const handleDisconnect = async () => {
    const provider = window.ethereum
    if (provider) {
      try {
        await provider.request({
          method: "wallet_revokePermissions",
          params: [{ eth_accounts: {} }]
        })
      } catch (err) {
        console.error("断开失败", err)
      } finally {
        // 不管权限撤销是否成功，都清空本地状态
        deactivate()
      }
    }
  }

  return (
    <div>
      {!account && <button onClick={activateBrowserWallet}> Connect </button>}
      {account && <button onClick={handleDisconnect}> Disconnect </button>}
      {account && <p>Account: {account}</p>}
    </div>
  )
}

export default TryUseDappExample

你遇到的GUI显示异常如下图：

如果遇到不支持wallet_revokePermissions的旧版MetaMask，可提示用户手动操作：点击MetaMask插件顶部的已连接站点按钮，找到当前站点后点击断开即可。

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