在href中调用auth0登录 [英] Calling auth0 login in href

问题描述

如果用户未登录，我正尝试显示一条消息.请在此处登录(红色)以继续.

I'm trying to show a message if the user is not logged in. Please Login here (red color) to continue.

在render方法中，我需要检查并查看用户是否已经登录以不显示任何消息. 我也有一个将用户引导到登录页面的登录方法.

In the render method, I need to check and see if the user is already logged in to not show any message. I also have a login method that directs user to the login page.

我需要显示一个看起来像超链接文本的按钮，因为我无法在href中调用this.login函数.现在，登录"和这里"之间有很大的空间(由于按钮).我还需要将此处"标记为红色，以告知用户可点击.

I need to show a button to look like a hyperlinked text because I can't call the this.login function in a href. Now there's a big space (because of the button) between "login" and "here". I also need to make "here" red to inform the user that it's clickable.

我尝试了<div> Please login <a onClick={this.login}>here</a></div>，但是它的这里"看起来像是一个简单的文本.没有链接出现.只有按钮可以添加链接，我不知道原因.

I tried <div> Please login <a onClick={this.login}>here</a></div> but it "here" looks like a simple text. No link appears. Only the button can add a link and I don't know the reason.

{!this.props.isAuthed && <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>}

推荐答案

尝试一下:

<div> Please login <a onClick={this.login} href="#">here</a></div>

原因是:没有href属性的a标签不会被浏览器呈现为链接.为了减轻这种情况，我们为它添加了一些任意值.

The reason is: An a tag without the href attribute is not rendered like a link by browsers. To mitigate that, we add it with some arbitrary value.

在onClick处理程序上-针对您的情况login-您需要确保防止发生默认操作-导航到相对URL #-

On your onClick handler - login in your case - you need to ensure that you prevent the default action - navigating to the relative url # - from happening:

login = e => {
    e.preventDefault();
    // your login logic
}

这篇关于在href中调用auth0登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！