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