前端项目-10-注册-登录-退出登录-导航守卫

文章列表

1-注册业务

1.1-静态页面开发

1.2-注册页面的短信验证码

1.3-注册用户

2-登录业务

3-获取用户信息和退出登录

4-导航守卫

1-注册业务

1.1-静态页面开发

重点在于业务逻辑的开发，静态页面已经弄好，直接跳过...

1.2-注册页面的短信验证码

在真实的环境中，点击发送验证码，会向用户的手机发送一条短信，用户收到短信，填写短信的验证码，这里我们服务端直接返回验证码，获取到我们设置到文本框中。

开发思路：收集表单填写的数据v-model，然后简单验证提交给服务端。

写api->新建仓库文件(如果没有)->import api方法->注册小仓库到大仓库(如果没有注册)->写action->写mutations，state(如果需要)->组件派发action

我们之前重复很多遍，这里只截图编写action等重点部分，其他省略

1.3-注册用户

当用户填写完表单相关参数后，点击完成注册按钮，前端需要简单校验向服务端提交表单数据调用注册接口，注册用户信息。
写api->新建仓库文件(如果没有)->import api方法->注册小仓库到大仓库(如果没有注册)->写action->写mutations，state(如果需要)->组件派发action。

2-登录业务

当用户注册成功后，跳转到登录页面，填写用户刚才注册的手机号和密码，点击登录按钮，向服务器发送登录请求，获取服务器返回的token数据。前端拿到数据，需要将token持久化存储-localStorage中，而且请求头以后都要带上token参数，还需要配置请求头的token参数。用户登录成功后，需要跳转到之前的界面或者home组件。

写api->新建仓库文件(如果没有)->import api方法->注册小仓库到大仓库(如果没有注册)->写action->写mutations，state(如果需要)->组件派发action。

登录按钮这边有form表单结构，电脑登录按钮：会触发form表单默认行为；stop:阻止事件的传播;prevent:阻止默认事件;once:事件仅仅触发一次。

请求头中封装token参数信息：

3-获取用户信息和退出登录

请求服务端获取用户信息接口，带上登录的token服务器返回用户的信息；获取到用户信息，展示在header组件上。

写api->新建仓库文件(如果没有)->import api方法->注册小仓库到大仓库(如果没有注册)->写action->写mutations，state(如果需要)->组件派发action。

我们需要考虑到派发action的时机和位置，先定义接口和开发store文件后续考虑派发action的时机和位置。

header组件我们需要处理事情：1-判断有没有nickName（实际项目中要看服务端返回那个字段肯定有，真实项目nickName有可能服务端没有返回，返回useName，这里可以按需替换），如果有需要展示nickName和退出登录，如果没有需要展示请登录 | 免费注册；；2-点击退出登录，派发action，调用退出登录接口。