用户登录

现在用户成功登录以后,刷新一下页面,会丢失用户的登录状态。回到项目,找到 app 组件里的 onLoginSuccess,成功登录以后会执行这个方法。

在这个方法里我们可以把服务端给用户签发的令牌存储到浏览器的 LocalStorage 里。这样在需要的时候我们可以从 LocalStorage 里提取用户的令牌。

用一下浏览器上提供的 localStorage ,它上面有个 setItem 方法可以设置要存储的数据。有这个方法有两个参数,一个是数据的名字,另一个是具体的数据。这个名字我们可以自己随便定义,比如 tid ,对应的值是 data 里的 token 这个属性的值。

这样用户登录成功以后,应用会把服务端给用户签发的令牌存储到 localStorage 里,数据的名字叫 tid。 下面可以再用一下 localStorage 上面的 setItem 设置存储一个数据,名字是 uid,它的值是当前用户的 id 号,这里可以设置成 data 里的 id。

当前这个组件创建之后,我们可以先试着从浏览器的 localstorage 里提取存储的 tid 还有 uid 这两个数据。 添加一个 tid ,用一下 localStorage 上面的 getItem ,要把获取的数据的名字告诉给这个方法,这里就是 tid。

下面再添加一个 uid,用一下 localStorage 上面的 getItem,这次需要的数据的名字叫 uid。

然后做一下判断,如果 tid 有值, 可以把它的值交给这个组件里的 token 这个数据。 再判断一下,如果 uid 有值,可以调用一下组件里的 getCurrentUser 这个方法获取这个用户相关的数据。

在浏览器上测试一下,先打开浏览器开发者工具里的 Application 选项卡,在 Storage 的下面,找到 LocalStorage ,选择这个 localhost:8080 。

然后再输入想要登录的用户的用户名,还有用户的密码,点击 登录。 成功以后会把服务端给用户签发的令牌存储到浏览器的 LocalStorage 里,数据的名字叫 tid,这里还有一个 uid,它的值是当前这个用户的 id 号。

再刷新一下这个页面,你会发现这次没有丢失用户的登录状态,页面上仍然会显示当前登录的这个用户的用户名。这是因为在创建 app 组件的时候,它会从浏览器的 LocalStorage 里调取 tid,把它交给组件的 token 数据。还会调取 uid ,然后执行 getCurrentUser 这个方法获得用户的相关数据。

在 Vue 应用里记住用户的登录状态《 Vue.js 前端应用 #10:身份验证 》

统计

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

社会化网络

关于

微信订阅号

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