Vue项目--尚品汇（登录注册）、token存储与过期

1.样式里也可以使用@符号代替src路径，但是需要使用~@

2. 注册部分需要表单验证，这里暂时没做

点击发送验证码，后台会给用户手机发送一个验证码，用户填写在注册界面，提交给后台。

调接口，post

3.登录 调接口，post，参数为手机号和密码。服务器会返回用户的token作为用户的唯一标识符。我们首先将其存在vuex中，但是vuex只能暂存，刷新就丢失了。想要持久化存储需要使用localStorage。在vuex中的token后面，用localStorage.getItem("TOKEN")，使其在刷新的时候可以从localStorage中获取用户token。

如何设置token的过期时间呢？在setItem的时候将响应头中的data信息也存入到localStorage中，在发请求的时候设置请求拦截器，计算当前时间与存储的时间差，判断token是否过期。如果过期就将token置空，重新登录。

用户点击登录以后，需要将token带给服务器，与uuid用法类似，放在请求头：

 4.

跳转到登录页面的修改版：

如果在登陆之前点击了某个不能去到的页面（如购买订单页面），那么在跳转到登录页面之前，将原路由地址以query参数（redirect）的形式传递给登录页。登录成功以后直接跳到目标页。

5.独享路由守卫

交易、交易成功等页面，必须是从某个页面跳过来的，不能直接到这个页面，需要独享路由守卫进行拦截。

next(false) 中断路由跳转。