VUE开发SPA之较舒服的微信受权登陆

SPA单页应用中微信受权登陆的一点思路

单页应用应该如何解决微信受权登陆的尴尬跳转？后退没法返回？
主要遇到的问题就是
先进入单页应用，一边渲染页面一边判断用户有没有登陆，当判断到没有登陆时异步数据请求已经发送出去了，而后要跳转到微信受权页面，这样就浪费了一次网络请求且用户可能要去点击这个数据告终果...跳走了！在受权成功后用户点击后退再次进行受权有没有？？？
本文主要讲述

对于单页应用应该在哪一个阶段获取微信受权？
只考虑网站彻底依赖微信受权登陆，一进入就要以受权的身份进入

基本思路

核心是须要有个author.vue 叫它受权中间页好了

vue开发过程当中的一些点子

因为个人业务是彻底依赖微信受权登陆的，也就是用户一进来就应该是已经完成受权的
为了不让用户明显感受到先进入网站而后又跳转到微信受权页面
咱们从vue-router下手
基本实现思路是：

• 不管使用哪一个url进入网站都会先触发router.beforeEach钩子
• 在router.beforeEach钩子中判断用户当前登陆状态
• 若没有登陆则保存用户进入的url并跳转到author受权页面
• author受权页面完成微信受权以及token的写入实现用户登陆
• 获取前面保存的用户进入url并跳转

通过这样一个流程，用户感受到的就是，不管从哪一个url进入SPA，都会先显示author页面，而后再进入本身想要进入的页面，而不是先进入本身想要进入的页面再闪到author页面，这样不只节省了资源也提高了用户体验，更重要的一点是！咱们的项目多了一个广告页面(无语...)！！！

先贴上个人实现代码
用户信息保存在Vuex中

// holdno是我本身定义的一个工具集 里面有各类操做方法
router.beforeEach((to, from, next) => {
  if(!store.state.user.id && to.path != '/author'){
    // 第一次进入项目
    holdno.cookie.set('beforeLoginUrl', to.fullPath) // 保存用户进入的url
    next('/author')
    return false
  }
  next()
})

下面来看一下author页面的处理逻辑

created () {
    // 检测会员有没有登陆
    if(!holdno.cookie.get('user')){
      let ua = window.navigator.userAgent.toLowerCase()
      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        // 跳转到微信受权页面
        window.location.href = this.webUrl + '/Wap/User/getOpenid'
      }
    }else{
      // 若是有token 可是vuex中没有用户登陆信息则作登陆操做
      this.login()
    }
},
methods: {
    login () {
      let url = this.webUrl + '/Wap/User/info'
      // 经过cookie中保存的token 获取用户信息
      this.$http.get(url).then(response => {
        response = response.body
        if(response){
          // 保存用户登陆状态(Vuex)
          this.$store.commit('user', response)
          setTimeout(() => {
            this.goBeforeLoginUrl() // 页面恢复(进入用户一开始请求的页面)
          }, 2000)
        }else{
          this.$alert('服务器撸猫去惹 :(', 'wrong')
          if(holdno.cookie.get('user')){
            // 跳转到微信受权页面
            window.location.href = this.webUrl + '/Wap/User/getOpenid'
          }
        }
      })
    }
}

上述代码中 window.location.href = this.webUrl + '/Wap/User/getOpenid'
这一段是后端请求微信受权登陆接口的地址，在后端获取到用户信息及openid后再次跳转到author页面而不是直接定向到用户想要请求的位置，这样作的缘由很简单。

若是用户跳转到受权页面，由后端获取用户信息并保存好登陆状态，重定向到用户请求的页面，这时只要用户点击一下后退，全部的逻辑从新再来一遍有没有？做为一个不懂技术的用户，应该也是很郁闷，为何后退仍是跳回来了呢？？？

因此获取用户信息后再次重定向到author页面，由author作一个中间页检测到获取到用户信息后在前端作一个跳转，也就是代码中的this.goBeforeLoginUrl()(跳转到登陆前的url ...哈哈哈)，这时候用户再点击后退就会退回到author页面而不是后端获取用户openid的url，但真的会再次显示author页面给用户吗？并不会，回看咱们路由钩子的定义：

router.beforeEach((to, from, next) => {
  if(to.path == '/author' && store.state.user.id){
    // 用户使用后退返回到受权页，则默认回到首页
    next('/index')
    return false
  }
  ...
})

后面部分这里不重要，展现出来的则是关键部分，在再次跳转至author前，路由钩子被触发，检测到即将进入的页面to.path == '/author'成立同时刚才在this.login()中作了this.$store.commit('user', response)操做，因此if条件成立页面被直接跳转至'/index'首页，因此在这一个流程中，用户并无再次看到受权页面，而是直接返回到了首页，是否是很完美！

this.goBeforeLoginUrl()

// 登陆后跳转方法
Vue.prototype.goBeforeLoginUrl = () => {
  let url = holdno.cookie.get('beforeLoginUrl')
  if(!url || url.indexOf('/author') != -1){
    router.push('/index')
  }else{
    if(url == '/'){
      url = '/index'
    }
    router.push(url)
    holdno.cookie.set('beforeLoginUrl', '')
  }
}

看完整个流程，author只讲到逻辑处理，但它毕竟是一个页面，也是要展现给用户看的，只处理逻辑的话难道白花花的一片show给用户吗？固然不是！想必你们都了解app在初次启动时都有一个广告页吧，咱们彻底能够把author受权中间页包装成一个广告页，在用户浏览花哨的图片(广告)时默默完成受权登陆的处理 :)

大概就是这么个意思 :P

扫码体验

emmmm... 如今已是小程序的时代了，因此我把微信web站点给关掉了，没办法体验了 很差意思。

但愿能有大神交流更优解决方案。