例如，我想创建一个包含Log in 和Sign up 按钮的nav bar，但是当用户登录时，我希望nav bar 包含Profile 按钮和图像缩略图用户和Sign out 按钮。
那么实现这一目标的方法和最佳实践是什么？
注意：我不知道这是否由前端框架实现
但如果是，假设我正在使用 reactJS 与 expressJS 一起运行。
【问题讨论】：
标签： javascript jquery html css reactjs
您可以在前端使用 AJAX 调用或在后端执行此操作，但我建议您在后端执行此操作，这样您就不会呈现不必要的 HTML-JS 代码。
基本上，您要做的就是查看您的框架（我既没有使用过 expressJs 也没有使用过 reactJS）存储用户登录数据的位置，以及是否有一个变量可以告诉您用户是否是已通过身份验证。
然后您必须创建一个模板，该模板作为视图从控制器调用并接收有关用户是否登录的信息（例如，在 Django 中，您可以将变量从 views.py 传递到模板）
您必须创建一个 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 文件或脚本。
【讨论】：
一种方法是在 NavBar 组件状态中保留一个布尔标志 - isLoggedIn。基于此，您可以决定呈现登录和注册或个人资料并退出。
你可以参考这个来理解 React.js 中的条件渲染 - https://reactjs.org/docs/conditional-rendering.html
【讨论】：