Question

例如，我想创建一个包含nav bar和Log in按钮的Sign up但是当用户登录时，我希望nav bar包含{{} 1}}按钮，带有用户的图像缩略图和Profile按钮。

那么实现这一目标的方法和最佳实践是什么？

注意：我不知道这是否是由前端框架实现的但如果是，我们假设我使用Sign out运行reactJS。

Answer 1

您可以使用AJAX调用或后端进行前端操作，但我建议您在后端执行此操作，这样您就不会呈现不必要的HTML-JS代码。

基本上你要做的就是看看你的框架中的哪个地方（我还没有使用过expressJs和reactJS）用户登录数据存储，如果有变量告诉你是否用户已通过身份验证。

然后你必须创建一个模板，从控制器调用一个视图，并接收有关用户是否登录的信息（例如，在Django中你可以将views.py中的变量传递给模板）< / p>

您必须创建一个if子句，用于评估布尔值，您可以在其中指明用户是否经过身份验证，并根据具体情况呈现不同的HTML / CSS。

您必须在导航栏中包含此内容并准备类似

的内容

{% if user_logged_in %}
<html code for logged in user with profile picture and all that>
{% else %}
<html code with login buttons>
{% endif %}

我使用的是django-template语言，但我确信在你的情况下有一种特定的写法。

您也可以在标记中执行此操作以加载不同的css文件或脚本。

Answer 2

一种方法是在NavBar组件状态中保留一个布尔标志 - isLoggedIn 。在此基础上，您可以决定呈现Login＆amp;注册或简介＆amp;退出。

你可以参考这个来理解React.js中的条件渲染 - https://reactjs.org/docs/conditional-rendering.html