vue之axios 与后端交互 获取token并保存

接下来几节演示下较完整的 用户获取token 并且使用token访问一些需要鉴权的资源
这里需要跟后端api进行交互 以php为例


image.png

本例演示地址为localhost:8999/news/token.php
参数uname=bhc&upwd=123
本例子演示为get请求 直接将参数加载请求 url后面
是一个用户相关的api 输入用户名密码 匹配返回一个token
为了方便 这里没加数据库 暂时匹配用户名bhc密码123 代表成功


image.png

首先看下后端api代码
image.png

访问下 看下输出格式

没写用户名 密码 输出错误码和错误信息


image.png

写入用户名和密码
image.png

生成token和过期时间
下面看下前台代码
image.png

接下来编写login()函数代码
image.png

运行结果
输入abc和123
image.png

输入bhc和123
image.png

点击成功后
image.png

可以发现存入了localstorage

你可能感兴趣的:(vue之axios 与后端交互 获取token并保存)