Vue电商项目--登录与注册

登录注册静态组件

刚刚报了一个错误，找不到图片的资源

assets文件夹--放置全部组件共用静态资源

在样式当中也可以使用@符号【src别名】。切记在前面加上

注册业务上

先修改原先的接口成这个按钮

然后把input框里面的数据保存到data中

注册业务下

就是点击获取验证码，就要发起请求

下面是接口：

/api/user/passport/sendCode/{phone}

获取验证码

get

/api/user/userAddress/auth/findUserAddressList

获取用户地址信息

get

请求给完，写仓库。这里把登录和注册合为一个仓库

然后去调用它

成功返回了一个验证码

获取验证码的这个接口，把验证码返回，但是正常情况，后台验证码发送到用户手机上【省钱】

这样就把数据存储进去了，此时我们就可以在组件中拿数据了

添加一个事件，用于获取vuex中的验证码

获取成功

完成下一个逻辑，俩个密码之间的判断

当然，注册按钮也是有点击事件，也是向服务器发起请求

看接口文档

注册用户

请求地址

/api/user/passport/register

请求方式

POST

参数类型

|----------|--------|------|-------|
| 参数名称 | 类型 | 是否必选 | 描述 |
| phone | string | Y | 注册手机号 |
| password | string | Y | 密码 |
| code | string | Y | 验证码 |

返回示例

成功：

|------------------------------------------------------------|
| { "code": 200, "message": "成功", "data": null, "ok": true } |

先写接口，然后去仓库发起请求

派发action

测试登录成功

完善代码

成功回调

登录业务（token）

在登陆界面收集用户名和密码

然后是登陆的接口

请求地址

/api/user/passport/login

请求方式

POST

参数类型

|----------|--------|------|-----|
| 参数名称 | 类型 | 是否必选 | 描述 |
| phone | string | Y | 用户名 |
| password | string | Y | 密码 |

返回示例

成功：

|-------------------------------------------------------------------------------------------------------------------------------|
| { code: 200 message: "成功" data:{ nickName:"Administrator", name:"Admin", token: 90aa16f24d04c7d882051412f9ec45b" } ok: true } |

失败:

|--------------------------------------------------|
| { code: 201 message: "失败" data: null ok: false } |

先写接口，然后在仓库中去调用这个接口

然后去派发action

写一个登陆的回调

这里我们要注意的一点，就是阻止表单的默认行为。

这里有一个注意点

Cannot access 'phone' before initialization 我报了这个错误

解决方案就是const {phone,password}=this;少了**;**号

登录成功他会返回三个值

其中一个token要注意

登录成功的时候，后台为了区分你这个用户是谁-服务器下发token【令牌：唯一标识符】

登录接口：做的不完美，一般登录成功服务器会下发token，前台持久化存储token，【带着token找服务器要用户信息进行展示】

我们需要持久化存储这个token的值，但是要注意的一点就是，vuex是不能持久化的存储数据

用户登录携带token获取用户信息

复习：

1.完成了登录和注册的静态组件【assets文件夹：组件共用的静态资源 css当中书写@符号】

2.表单验证暂时没有处理，最后一天统一处理

3.vuex存储数据非持久化

添加了token校验获取用户登录信息，用户登录只保存用户的token

token校验

http://182.92.128.115/api/user/passport/auth/getUserInfo

先写接口

写完api，搞三连环

然后在请求拦截器中，设置他的token

此时登录，然后跳转就能token了

然后使用v-if把登录先后页面需要展示的显示出来

但是在刷新，token就没了。因为没有再次派发事件，所以，现在我们这种写法没有持久化存储，不完整的。

登录业务中讲解存在问题

持久化存储，也可以采用外部封装的方式

外部封装了一个，然后引用它

现在我们确实是存了，但是并没有取出来使用

上面获取用户信息的代码有点问题，我并没有写完成，因此参数没有传进来。因此报错了，下面是完整代码

复制代码

async getUserInfo({commit},data){
        let result=await reqUserInfo(data)
        if(result.code==200){
            commit("GETUSERINFO",result.data)
        }
    }