我的目的是在标题部分显示登录的用户名和注销链接。 用户登录到我的应用程序。使用用户名和密码。成功登录后， 我想在右上方的标题栏中显示相应的用户名，以及注销链接。
标题栏html [位于App.js中]-
<nav classname="navbar navbar-expand-lg navbar-light bg-custom">
<a classname="navbar-brand" href="https://www.sellcodes.com/pro_indigo" target="_blank">
<img src={logoMain} width="30" height="30" alt="" />
</a>
<Link to="/" classname="navbar-brand">Football Legends</Link>
<div classname="collpase nav-collapse">
<ul classname="navbar-nav mr-auto">
<li classname="navbar-item">
<Link to="/" classname="nav-link">Players</Link>
</li>
<li classname="navbar-item">
<Link to="/create" classname="nav-link">Create Player</Link>
</li>
<li classname="navbar-item">
<Link to="/hallofFamers" classname="nav-link">Hall of Fame</Link>
</li>
<li classname="navbar-item" style={{marginLeft:680}}>
<Link to="/login" classname="nav-link">Login</Link>
</li>
<li classname="navbar-item" style={{ marginLeft: 12 }}>
<Link to="/register" classname="nav-link">Sign Up</Link>
</li>
</ul>
</div>
</nav>
login.js代码-
import { login } from './shared/UserFunction';
onSubmit(e) {
e.preventDefault()
const user = {
email: this.state.email,password: this.state.password
}
login(user).then(res => {
this.props.history.push(`user/dashboard`)
})
}
您可以理解，我有一个单独的文件，其中写入了我的登录实现逻辑，而我刚从那里导入。
UserFunction.js代码-
import axios from 'axios';
import { Router,Route,Link,RouteHandler } from 'react-router';
export const login = user => {
return axios
.post('http://localhost:4000/users/login',{
email: user.email,password: user.password
})
.then(response => {
localStorage.setItem('usertoken',(response.data));
console.log('Login Successful');
return response.data
})
.catch(err => {
console.log(err)
})
}
export const findToken = () => {
return localStorage.getItem('usertoken');
}
export const logout =()=>
{
localStorage.removeItem('usertoken');
this.props.history.push('/login');
}
我试图做到这一点的方法是在Angular * ngIf和模板中遵循几乎相同的方法。 所以我尝试了以下代码-
import { findToken } from './components/shared/UserFunction';
<nav classname="navbar navbar-expand-lg navbar-light bg-custom">
<a classname="navbar-brand" href="https://www.sellcodes.com/pro_indigo" target="_blank">
<img src={logoMain} width="30" height="30" alt="" />
</a>
<Link to="/" classname="navbar-brand">Football Legends</Link>
<div classname="collpase nav-collapse">
<ul classname="navbar-nav mr-auto">
<li classname="navbar-item">
<Link to="/" classname="nav-link">Players</Link>
</li>
<li classname="navbar-item">
<Link to="/create" classname="nav-link">Create Player</Link>
</li>
<li classname="navbar-item">
<Link to="/hallofFamers" classname="nav-link">Hall of Fame</Link>
</li>
{findToken &&
[
<li classname="navbar-item" style={{marginLeft:680}}>
<Link to="/user/profile" classname="nav-link">{the username supposed to be here}</Link>
</li>
<li classname="navbar-item" style={{ marginLeft: 12 }}>
<Link to="/login" classname="nav-link">Logout</Link>
</li>
]
}
<li classname="navbar-item" style={{marginLeft:680}}>
<Link to="/login" classname="nav-link">Login</Link>
</li>
<li classname="navbar-item" style={{ marginLeft: 12 }}>
<Link to="/register" classname="nav-link">Sign Up</Link>
</li>
</ul>
</div>
</nav>
但这给了我很多与JSX和Parent Element Router有关的错误。 那么我应该如何处理呢？我可以遵循的更好的方法/技术？我在咨询其他链接后尝试了上述方法。在我的情况下，执行此操作的最佳方法是什么？
编辑：我对代码进行了一些修改，但仍然没有得到想要的结果。
<nav classname="navbar navbar-expand-lg navbar-light bg-custom">
<a classname="navbar-brand" href="https://www.sellcodes.com/pro_indigo" target="_blank">
<img src={logoMain} width="30" height="30" alt="" />
</a>
<Link to="/" classname="navbar-brand">Football Legends</Link>
<div classname="collpase nav-collapse">
<ul classname="navbar-nav mr-auto">
<li classname="navbar-item">
<Link to="/" classname="nav-link">Players</Link>
</li>
<li classname="navbar-item">
<Link to="/create" classname="nav-link">Create Player</Link>
</li>
<li classname="navbar-item">
<Link to="/hallofFamers" classname="nav-link">Hall of Fame</Link>
</li>
{localStorage.getItem('usertoken')!==null ?
<React.Fragment>
<li classname="nav-item" style={{ marginLeft: 680 }}>
<Link to="/profile" classname="nav-link">
User
</Link>
</li>
<li classname="nav-item" style={{ marginLeft: 12 }}>
<a href="" onClick={this.logOut.bind(this)} classname="nav-link">
Logout
</a>
</li>
</React.Fragment>
:
<React.Fragment>
<li classname="navbar-item" style={{ marginLeft: 680 }}>
<Link to="/login" classname="nav-link">Login</Link>
</li>
<li classname="navbar-item" style={{ marginLeft: 12 }}>
<Link to="/register" classname="nav-link">Sign Up</Link>
</li>
</React.Fragment>
}
</ul>
</div>
</nav>
如您所见，我添加了一个三元表达式来检查存储令牌的可用性，然后在此基础上添加2个React Fragments以显示不同的链接。但是我还是不明白。 登录后，它会显示相同的“登录”和“注册”链接。
你能告诉我为什么吗？怎么了以上两种方法都不起作用的原因是什么？谁能看到它？