用户登录

退出登录就是把当前用户数据的值设置成 null,再把放在浏览器本地存储里的当前用户数据也删除掉。

新建一个文件,放在 composables 里面,名字是 use-logout.ts,文件里定义并导出一个函数,名字叫 useLogout。 函数里定义一个 currentUser ,用一下 useState,状态的名字叫 currentUser。 下面设置一下 current.value 的值,让它等于 null。

再用一下 useLocalStorage,本地存储数据的名字叫 currentUser,第二个参数是 null,这样会把存储在本地存储里的名字是 currentUser 的这个数据删除掉。

default

打开 default 这个组件,在这个登录小图标的下面,添加一组 div,元素上用 v-else 指令,元素里添加一个图像元素,图像文件的地址是 /icons/logout.svg,alt 属性的值是退出登录,绑定元素的 click 事件,用 useLogout 来处理这个事件。

测试

在浏览器测试一下,当前是登录状态,所以在页面头部这里会显示一个退出登录小图标,点击这个小图标,会执行 useLogout。它会把当前用户设置成 null,也会将放在浏览器本地存储里的 currentUser 这条数据删除掉。

在 Nuxt 应用里实现退出登录《 Nuxt.js:用户登录 》

统计

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

社会化网络

关于

微信订阅号

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