刚进入公司的时候，参与了一个公司较为复杂的项目，我们公司大部分都只是一些活动页面，复杂一点的项目并不多，我运气比较好，进入公司之后没有多久，就跟公司的后台团队一起开发一个企业服务性的项目。当时跟我一起做前端的还有另外两个同事，我负责登录、注册、需求业务模块（添加、编辑、删除、展示需求）、服务类别展示等等，登录和注册这块的业务逻辑，之前的项目虽然有，但要么前端只负责切页面，要么是别人做，所以我也不用考虑业务逻辑，把页面切出来就好了，而且之前的项目没有考虑用前后端分离的方式，也用的不是vue 2.0，老大说我们这个项目全部用vue 2.0来写，完全采用前后端分离的方式来做，后台只负责写接口，页面展示、功能实现、业务逻辑全都交给前端来写，这对于当时的我来说是一个非常大的挑战，但这绝对是一件好事，我也希望能通过这个项目学习到更多的东西，所以就下定决心要做好。
由于之前这方面没有什么经验，所以在做的过程中也是各种蒙逼像，大部分的情况下还要请教我们老大，有些很重要的业务逻辑还是他帮忙一起写的，不过后来我也会把他的代码自己过一遍，有不懂的地方就去问。
现在项目已经结束很久了，刚好这几天有时间，我也想把之前项目中的一些比较重要的或者常用的知识点整理一下，方便以后使用。
今天这篇文章就对微信授权、注册、登录这块的业务逻辑总结一下，做个简单的分享。
下面是文章内容真正的开始：
一，先来说说用户请求项目页面时需要做哪些操作
在微信中扫码或点击某个链接的时候，一般都会先经过微信授权，有些用户可能之前进入过，在上一次进入页面的时候就已经授权了，所以下次再进入页面的时候就不需再授权了，而没有授权过的用户则会看到一个授权页面，如下图：
WechatIMG19.jpg
点击确认登录按钮，走的是我们后台auth页的逻辑，后台接收到用户确认登录的信息后，就会获取用户的一些基本信息，然后根据这些基本信息和时间等元素生成一个唯一的access_token，之后将页面跳转到前端的auth页面，之后再进入到相应的页面（后面会详细讲）。
而如果之前有授权过，就能看到下面这个页面：
WechatIMG18.jpg
看到上面这个页面后，页面自动跳转到你想看到的页面，有的时候可能会需要稍做等待。
我们的项目中微信授权分前端auth页面和后台auth页面，一般会先进入后台的auth页面授权，完了之后跳到前端的auth页面，再由前端的auth页面来跳转到相应的页面，如果在请求的时候，你是通过输入地址、扫码、点击分享的地址进入，我们则会把你这个地址存到localStorage中，等你通过了后台的授权后，进入前端auth页面，就会到localStorage中去取，如果能取到就直接跳转到这个地址，如果不能取到就跳转到首页或登录页。
有些项目可能会有权限，比如说已注册的会员能看产品详情页和联系商家页，但游客（没有注册的客户）就只能看首页和活动页，这种分权限的项目还需要多加一层判断，进入需要注册了才能看的页面如果没有注册就会先跳转到注册页面，注册完了直接登录，登录完了之后再跳回到刚才想进的页面，另外一种情况就是如果未注册用户先进入到游客就能直接看的页面，点击了某些“报名”、“参加活动”、“联系商家”等这类需要注册了才能进入的按钮时，还是需要先跳转到注册页面，让用户先注册，然后直接登录了再进行下面的操作。
如果判断用户是否注册过呢？
项目中的每一个接口请求回来的数据中都有一个"is_mobile_user"的字段，这个字段就是后台通过拿手机号码校验后得出来的结果，如果用户表中有当前用户的手机号，说明这个用户是注册过的，如果没有就是没有注册过，也就是说"is_mobile_user":true的时候，就不跳转到注册页面，如果为"is_mobile_user":false的时候就会跳转到注册页面，我们就是根据这个来判断的。
请求后台接口返回的数据结构大概长这个样子：
{
"code": 0,
"msg": "message",
"content": {
"id": "1",
"start_at": "1234567890",
"status": "3",
"members_num": 1,
"members": [{...}]
},
"is_mobile_user": false
}
二，下面来具体说一下细节：
1，进入项目的方式大概可以分以下几类：
--- 直接输入某个页面url地址进入
--- 通过点击分享的地址进入
--- 从选择公司阶段页面进入（新用户进入项目看到的第一个页面是选择公司阶段 ）
2，无论任何页面，只要想进入项目，都会经过后台授权auth页面，授权完成，然后进入前端的auth页面。
3，进入auth页面
首先会获取5个值
--- 获取url动态参数内的has_stage
--- 获取url动态参数内的access_token
--- 获取localStorage中jump_url值 （jump_url就是跳转过来的地址）
--- 获取当前url中的location.hostname
--- 获取当前url中的location.port
前三个是用来判读用户当前状态，后面两个则根据当前环境的不同用来拼接不同环境的后台授权地址。接下来就是根据不同的情况做判断了：
代码大致如下：
<script>
import Store from 'store';
export default {
created() {
let accessToken = this.$route.query.access_token,
hasStage = this.$route.query.has_stage,
jumpUrl = Store.get('jump_url'),
route = {replace: true},
uHostname = window.location.hostname,
uPort = window.location.port,
hostName = 'https://wx.chuangyejia.com/',
pathName = '/newapi/auth/index?app=hmp&stage_type=1&webhost=http://' + uHostname + ':' + uPort,
url = process.env.NODE_ENV === 'development' ? hostName + 'dev' + pathName : hostName + pathName;
if (!accessToken) { // 如果url中没有token就去localStorage找
accessToken = Store.get('access_token');
if (!accessToken) { // 如果localStorage不能取到
window.location.href = url; // 进入授权页面
}
}
Store.set('access_token', accessToken);
if(jumpUrl) { // 1 有jumpUrl跳到jumpUrl 或者是分享过来的页面
route['path'] = jumpUrl;
Store.remove('jump_url');
} else if (!hasStage || hasStage == undefined) { // 2 没有公司阶段 跳到选择公司阶段
route['path'] = '/select_stage'
} else { // 3 跳到首页
route['path'] = '/home';
}
this.$router.push(route);
}
}
</script>
（一）判断url动态参数中是否有access_token
第一种情况：如果url中有access_token → 将access_token存入到localStorage中，然后判断jump_url是否有值：
--- 如果有jumpUrl ：就跳到jumpUrl页面，同时，移除localStorage中的jump_url
--- 如果没有jumpUrl ：判断url中是否有hasStage 或者hasStage是否为空
--- 如果有hasStage ：跳转到首页
--- 如果没有hasStage ：跳转到选择公司阶段
这里需要说一下注册的逻辑：
1，用户进入选择公司阶段（一般是新用户），有四个选项：初创期，成长期，上市期，随便看看
2，选择前3项进入注册页面，填写手机号，获取验证码，提交注册之后进入编辑个人信息页，修改基本信息、公司阶段，然后进入首页。
3，选择随便看看，进入首页，当用户想进入以下页面的时候，就会跳转到注册页面进行注册、修改信息，然后进入刚刚点击的页面：编辑个人信息页、抵扣券订单页、抵扣券订单详情页、商家后台所有页、联系商家页、我的抵扣券页、我的个人中心页面、验证抵扣券页、我的需求页等等，这些页面都会判断is_mobile_user == false，如果为false，就会跳转到注册页面。
第二种情况：如果url中没有access_token → 就获取localStorage中的access_token，然后判断localStorage是否有access_token，如果localStorage有access_token ，将access_token存入到localStorage中，然后判断jump_url是否有值，
--- 如果有jumpUrl：就跳到jumpUrl页面，同时，移除localStorage中的jump_url
--- 如果没有jumpUrl：判断url中是否有hasStage 或者hasStage是否为空
--- 如果有hasStage：跳转到首页
--- 如果没有hasStage：跳到选择公司阶段
（后面接注册的逻辑）
第三种情况：如果localStorage中也没有access_token → ：就直接跳转到后台PHP的授权页面 此处如果需要跳转到PHP授权地址也需要进行判断，然后跳转。代码如下：
hostName = '[http://wx.chuangyejia.com/'](http://wx.chuangyejia.com/'),
pathName = '/newapi/auth/index?app=hmp&stage_type=1&webhost=[http://'](http://%27/) + uHostname + ':' + uPort,
url = process.env.NODE_ENV === 'development' ? hostName + 'dev' + pathName : hostName + pathName;
（三）router.beforeEach中的逻辑
还有一个必须要说的地方就是router.beforeEach中，我们这个项目用的是vue-router来做路由，在router.js文件中，先引入所有的页面（组件），然后定义路由地址，之后就会router.beforeEach这个全局的钩子中做一些操作，比如判断上一个地址是什么，然后根据不同的地址来显示不同的底部导航等等这类的，而我们的auth页面也会经过这个beforeEach的钩子，当auth页面这个路由进入到beforeEach时，我们还要再获取一次accessToken，因为如果用户直接输入auth页面地址进入的话，也是要授权的，所以，在beforeEach还是要先在localStorage中获取一下accessToken，如果当前的页面是auth并且accessToken为空，则先保存这个auth路由地址到localStorage中，然后再跳转到后台的授权页面，之后再接着走后面的流程。
大致代码如下：
router.beforeEach((to, from, next) => {
let toPath = to.path,
fromPath = from.path,
nextPath = next.path,
defShowStatus = toPath.replace(/[^/]/g, '').length > 1 ? false : true,
accessToken = Store.get('access_token'),
uHostname = window.location.hostname,
uPort = window.location.port,
hostName = 'https://wx.chuangyejia.com/',
pathName = '/newapi/auth/index?app=hmp&stage_type=1&webhost=http://' + uHostname + ':' + uPort,
url = process.env.NODE_ENV === 'development' ? hostName + 'dev' + pathName : hostName + pathName;
if (toPath.indexOf('/auth') !== 0 && (!accessToken || accessToken == undefined)) {
Store.set('jump_url', toPath);
window.location.href = url;
next();
}
next();
});
网友评论