用户登录

用户点击登录按钮以后可以请求服务端提供的用户登录接口。回到项目,先打开 app 组件处理一下,这里在组件被创建的时候,会请求用户登录,可以把这段代码删除掉。然后再把组件里的 user 这个数据也删除掉。

打开 UserLogin 组件,在组件的 login 方法里面,添加一组 try,catch ,发生错误的时候可以暂时把这个 error 里的 response 输出到控制台上,它的值是服务端做出的响应。

然后在 try 里面,声明一个 response,等于,await ,用一下 apiHttpClient,编辑器自动帮我们从 app.service 里导入了 apiHttpClient,这个东西是我们在 app.service 里创建的一个 axios 实例。

用一下它上面的 post 方法 ,请求的地址是 /login,第二个参数是请求里带的数据,一个对象,里面需要 name ,它的值是要登录的用户的名字,还需要一个 password,对应的值是用户的密码。

在控制台上可以输出响应里的 data 属性的值。

在浏览器上测试一下,输入用户名,再输入这个用户的密码, 点一下登录。 登录成功以后,会在控制台上输出服务端响应回来的数据。这里有用户的 id,用户名,还有给用户签发的令牌。

请求用户登录接口《 Vue.js 前端应用 #10:身份验证 》

统计

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

社会化网络

关于

微信订阅号

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