尝试在“注销”按钮上从本地存储中删除令牌答案

【问题标题】：Trying to remove Token from local storage on "Logout" button尝试在“注销”按钮上从本地存储中删除令牌
【发布时间】：2021-06-06 04:46:30
【问题描述】：

我正在创建一个基本的登录表单，它使用输入的任何凭据来存储令牌。在我的useToken.js 中，我创建了一个应该删除 Token 的箭头函数：

const removeToken = (userToken) => {
    localStorage.removeItem("token");
    setToken(null);
};

在我的标题中，我得到了应该removeToken 的注销按钮，并在单击它时注销用户。我应该注销用户的Header.js 按钮如下所示：

<Button variant="danger" onClick={removeToken}>
      LogOut
</Button>

它会抛出 removeToken 未定义错误。

【问题讨论】：

removeToken 应该在同一个文件中，或者应该正确导入。此外，您不需要在 removeToken 方法中传递 userToken，因为它在那里什么都不做。
这能回答你的问题吗？ Import JavaScript file and call functions using webpack, ES6, ReactJS

标签： reactjs local-storage token

【解决方案1】：

基于抛出的定义错误，您似乎没有将函数removeToken 导入您尝试使用的模块。所以先导出再导入再使用。

带有修复的代码可能看起来像这样

useToken.js

export const removeToken = (userToken) => { // export function from module 
  localStorage.removeItem("token");
  setToken(null);
}

Header.js

import { removeToken } from './useToken.js' // import removeToken function from useToken.js module
...
<Button variant="danger" onClick={removeToken}>
   LogOut
</Button>

在导入时不要忘记根据您的项目结构调整模块的路径。

【讨论】：

【解决方案2】：

localStorage.clear();

看看这个（：

【讨论】：