文章/答案/技术大牛

发布

社区首页 >问答首页 >如果用户已经登录，则限制对登录页面的访问。

问如果用户已经登录，则限制对登录页面的访问。
EN

Stack Overflow用户

提问于 2021-02-03 17:07:04

回答 2查看 494关注 0票数 0

在用户已经登录后，我如何限制对/login页面的访问(通过手动输入URL)？

我现在可以在url中输入/login，并且用户即使已经在主页中和主页上签名，也可以导航到/login页面。

我使用的是JWT，所以当用户导航到/login页面时，令牌仍然保留在localStorage中。

我在/login组件中尝试了一个钩子：

const history = useHistory()

useEffect(() => {
    const isToken = localStorage.getItem('user')
    if (isToken && isToken !== 'undefined') {
      history.push('/')
    }
}, [])

令牌设置如下：

localStorage.setItem('user', JSON.stringify(response.data));

现在，当我尝试在/login页面上运行时，它似乎想重定向，但是使用：

TypeError:未定义不可迭代(不能读取属性符号(Symbol.iterator))

请告诉我我错过了什么或者做错了什么

javascript

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-03 17:18:45

如果您使用的是React路由器，我建议您使用重定向。此外，在注销时，请确保清除本地存储中的前一个令牌。

if (token) {
    return <Redirect to={{pathname: '/'}} />
}

票数 2

Stack Overflow用户

发布于 2021-02-03 17:21:39

在您的Login组件中，您可以检查用户是否存在。如果是的话，就重定向吧。

呈现一个Redirect将导航到一个新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向(HTTP3xx)一样。

import { Redirect } from 'react-router-dom';

const Login = () => {

  const isLoggedIn = window.localStorage.getItem('user');

  if (isLoggedIn) <Redirect to="/" />

  return (
    // login page
  );

};

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66032287

复制

相似问题

问如果用户已经登录，则限制对登录页面的访问。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果用户已经登录，则限制对登录页面的访问。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果用户已经登录，则限制对登录页面的访问。
EN