理解用户登录与验证用户身份

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面再复习一下之前我们做的事情,打开 src/app 下面的 app 这个组件, 在这个组件的 created 方法里面,我们请求了服务端应用的用户登录接口。组件被创建以后会执行 created 方法。

请求的时候用的是 axios 的一个实例,请求用的是 post 方法,请求的地址是 /login,在这个请求里带的数据是组件里的 user 这个数据。

这里我们直接在组件里设置了 user 数据的值,在真正的应用里不能这么做。我们要给用户提供一个表单,让用户自己填写用户名还有密码。

登录成功以后设置了一下组件里的 token 这个数据的值,它的值设置成了响应数据里的 token 这个属性,这个属性的值就是登录成功以后服务端应用给这个用户签发的令牌。

在以后的请求里需要把这个令牌的值放在请求的一个特定的头部数据里,这样服务端就可以根据请求里的令牌的值来判断当前请求它的用户是谁了。

比如在这里请求删除内容接口的时候,需要验证用户是谁,所在这里在请求里设置了一下 Authorization 这个头部数据,它的值就是用户的令牌。

回到浏览器再测试一下,在这个文本框里输入内容,按下回车,会请求创建内容接口,创建了一个新的内容,注意新创建的这个内容的作者是王皓,服务端通过用户的令牌可以判断用户是谁。

点击 删除 按钮,可以把这个内容从应用的数据仓库里删除掉。

理解用户登录与验证用户身份《 Vue.js 前端应用 #10:身份验证 》

统计

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

社会化网络

关于

微信订阅号

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