vue-admin-template 自学2-添加自定义登陆状态

时间:2024-05-31 12:33:12

项目需要在左侧菜单树的底部添加登陆状态显示,由于上一篇中已经屏蔽了默认的navbar状态菜单,这里,可以添加自定义的loginBar组件

1、在sideBar文件夹下新建loginBar组件

vue-admin-template 自学2-添加自定义登陆状态

2、登陆状态的现实,对于已经登陆的,要显示登出log out 按钮,这里绑定isLogin 来显示,当组件初始化后,通过计算isLogin中获取登录token来获取登陆状态,从而切换 logout 菜单的现实

vue-admin-template 自学2-添加自定义登陆状态

3、退出登录实现

d对于已经登陆的用户,显示了og out 按钮,点击log out,可实现退出登录操作,回到默认的登陆界面。在按钮log outog out 上绑定logout函数,在方法中先调用store中的logout方法,然后切换到登陆路由界面

vue-admin-template 自学2-添加自定义登陆状态

4、将loginBar添加到左侧容器上的右下角位置

在sideBar组件下插入div,将loginBar插入到div中,设置div的样式为绝对定位,并设置bottom和left参数

vue-admin-template 自学2-添加自定义登陆状态

5、实现如图所示

vue-admin-template 自学2-添加自定义登陆状态