用户登录

用户登录成功以后,在得到的响应的数据里面可以得到服务端给用户签发的令牌,就是这个 token 属性的值。我们可以把这个 token 存储在浏览器的 LocalStorage 里。

回到项目,打开 src/app 下面的 app.store.plugin.ts ,在这个 localStorageStorePlugin 插件里面,可以再添加一种情况,如果 Store 里 commit 的是 auth/login/setLoginResponseData 这个 mutation。

我们就执行一下 setStorage,在本地存储里存储一个数据,数据的名字叫 nid ,对应的值就是 mutation 的 payload 里面的那个 token 属性的值。下面再 break 出来。

测试

下面在浏览器上可以测试一下,可以把这个开发者工具放在窗口的右边儿。然后打开 Application 选项卡,打开 Storage,Local Storage 下面的 localhost:8080 ,注意观察这里的数据变化。

输入一个用户名,再输入对应的密码,登录成功,服务端签发了令牌。应用的 Store 会 commit 一个叫 setLoginResponseData 的 mutation。

在我们的一个 Store 插件里面,会在浏览器的 LocalStorage 里面设置一下叫 nid 的数据,对应的值就是服务端应用给登录成功的这个用户签发的令牌。也就是那个 token 属性的值。

在本地存储里存储用户令牌《 Vue.js 项目实践:身份验证 》

统计

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

社会化网络

关于

微信订阅号

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