用户登录

这个导航栏上的内容我想分成几个部分,一个主导航上的菜单项目 .. 还有一部分是一些工具链接,比如登录或者注册的链接,而且我需要在导航栏上根据用户的登录状态显示内容,比如用户登录以后可以显示用户信息,然后把登录或者注册链接隐藏起来 ..

回到导航栏这个 partial .. 这个主菜单上的菜单项目,现在只有一个 Posts .. 链接的地址是 route .. PostController.index ..

把其它几个项目删除掉 ..

在这个 navbar-nav 上面,添加一个 mr-auto ..

然后我们再添加一个 navbar-nav .. 这组东西会在导航栏的右边显示 .. 它里面要显示的东西需要根据用户的登录状态来决定 ... 用一个 loggedIn ... else .. endloggedIn ...

在 loggedIn 还有 else 之间的东西只有在用户是登录状态的时候才会显示 .. else 还有 endloggedIn 之间的内容会在没登录的时候显示 ..

用户登录成功以后,可以显示一个用户信息下拉菜单 .. 把这个下拉菜单放进来 ... 再修改一下 .. 上面显示的是当前登录的用户的名字 ... 在视图里, auth 这个对象里面会包含当前登录的用户相关的信息 .. auth.user.username .. 它是用户的用户名 ..

再设置一下这个下拉菜单里的项目 ... 先是用户的 Profile .. 地址就是用户的个人页面 .. 这个地址可以用一下 route .. UserController.show.. 设置一下 id 参数 ... 对应的值是 auth.user.id ..

下面再添加一个分隔符 .. 一个 div,加上 dropdown-divider .. 它下面这个项目可以是个登出表单 .. 暂时还添加一个普通的链接 .. 链接上的文字是 Logout ..

跟这个下拉菜单同一个级别,还有个添加内容用的东西 .. 一个 li ... 加上 nav-item .. 添加一个链接,加上 btn text-muted 这两个类 .. 链接的地址是 route.. PostController 的 create ..

链接是个小图标 .. 小 i, fas .. fa-plus ,它是一个加号 ..

这些东西就是用户状态是登录的时候要显示的东西 .. 再设置一下 else 下面的东西 .. 里面有两个项目 .. li .. nav-item .. mr-3 .. 里面是个链接 .. 加上 nav-link .. 链接地址是 route .. login .. 链接文字是 Login .. 一个登录用的链接 ..

再添加一个项目 ... 地址是 route .. signup .. 链接文字是 Register ..

预览

回到浏览器 ... 再预览一下 ... 现在用户是未登录的状态,所以导航栏右边这块会显示一个登录还有注册链接 ...

这个登录注册应该显示在导航栏的右边 .. 应该是哪里错了 .. 回到项目 .. 第一个导航菜单的包装上,这个类应该是 mr-auto ..

再回来试一下 ...

打开登录界面 ... 输入用户名 .. . 还有密码 .. 登录一下 ..

成功以后,导航栏上会显示当前登录的用户的用户名 .. 它是一个下拉菜单 .. 打开它 .. 里面有两个项目 .. 一个 Profile ... 还有一个 Logout ...

这个下拉菜单的显示我们可以再调整一下 .. 回到项目 .. 找到这个下拉菜单的包装元素 .. 上面添加一个 dropdown-menu-right .. 让它右对齐 ...

再回到浏览器预览一下 ..

根据用户登录状态显示内容《 Node.js 应用:身份验证 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点