登录/手机号+验证码/扫码

登录页

1.匹配好路由之后 2.登录页面的布局  使用   弹性盒子  然后引入element-ui表单修改样式以及自定义校验规则， 3.然后二次封装了axios配置好基本的请求、响应拦截器。 4.当用户在客户端输入账号密码，经过校验之后点击登录按钮，然后会发送请求到后端，后端接受通过校验之后，会生成一个Token 值，然后我们在前端可以通过localStorage.getltem('token')获取到这个token，然后接下来用户再登录，我们会先判断token是否存在，所以我一般是在axios的请求拦截器中统一给添加到请求头上

为了防止用户知道路径在地址栏输入url去其它页面的情况下，所以我在路由守卫中进行判断，如果有token的情况下，用户要访问的路径是登录页面的话，就重定向到主页，如果不是登录页的话就放行。如果没有 token的情况下，要访问的路径是登录页面的话，就放行。如果不是，那就重定向到登录页

当然了，我们只能在路由页面判断token是否存在，不能判断它是否过期或是错误的情况，所以我们还需要在axios的响应拦截器中根据后端返回的状态码进行响应的逻辑处理，如果错误就移出token 重定向到登录页让用户重新进行登录。

手机号+验证码

1.给获取验证码的按钮绑定事件，点击后禁用按钮并且开始倒计时(前端工作作) 2.然后前端发起ajax请求，请求后台提供的获取验证码接口传递手机号过去 3.后台接收到前端请求后，生成一个验证码.然后利用第三方验证码服务给对应手机号发送短信。 4.用户输入短信的验证码后，点击登录 5.前端获取对应的验证码后请求后台验证接口，通过则进行登录或注册，未通过 则提示验证码错误。

扫码登录过程：

1.用户访问登录页面，前端向后端请求登录的二维码和key，这个key用来索引用户登录状态。 2.服务端生成二维码，并将key（假设是"123"）保存（本地或redis），然后将二维码和参数返给前端，这里可以后端生成二维码并上传到OSS，然后返回给前端二维码的地址；也可以直接返回给前端字符串，前端自己去生成二维码：https://www.npmjs.com/package/qrcodejs。 3.前端获取到key="123"和二维码后，就使用key开始轮询登录状态，等待用户扫码登录。（这里的轮询可以用websocket长连接代替）。 4.用户手机已经扫码后，移动端跳转到授权登录页（携带参数key=“123”）。 5.用户点击登录后，前端调用后端接口，通知后端：“"123"对应的用户是我，我已经授权PC网页登录了，我的用户信息是：XXXXX”。 6.后端找到"123"对应的信息，更新用户登录状态为true，并更新用户信息。前端轮询再发轮询时候，后端发现状态改变，则返回给前端登录成功，并返回登录的用户信息。 7.前端收到登录成功的返回，就更新登录状态，展示用户信息，停止轮询。