vue—微信授权登录

在这里插入图片描述

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

对于单页应用应该在哪个阶段获取微信授权?
只考虑网站完全依赖微信授权登录,一进入就要以授权的身份进入
基本思路

核心是需要有个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授权中间页包装成一个广告页,在用户浏览花哨的图片(广告)时默默完成授权登录的处理 :)


Vue微信授权

Vue微信授权

在这里插入图片描述

大概的授权逻辑是:

  • 路由拦截:
    利用Vue路由拦截,判断用户登录状态(后面向后台请求的时候,让后台返回),如果是登录状态就next(),否则去授权页(这里提示一下,我弄了一个空白页用来授权用的author.vue)
    下面

  • 获取code:
    前端先获取当前地址,传给后台,后台拿到你的当前地址,通过微信提供的接口,返回一个拼接上参数(appid,redirect_uri…)的微信端授权地址,这时候前端跳转该地址显示微信授权页面,用户授权之后拿到带有code的地址。

  • 获取openid:
    截取地址获取code传递给后台,后台拿着code向微信服务器请求,获取access_token和openod并且存到数据库,返回有用的数据。

Vue 微信一键登录授权通常需要以下步骤: 1. 注册微信开放平台账号并创建应用,获取 AppID 和 AppSecret。 2. 在 Vue 项目中安装 `vue-wechat-auth` 插件,可以通过 npm 或 yarn 安装: ``` npm install vue-wechat-auth ``` 3. 在 `main.js` 中引入插件并配置: ```javascript import Vue from 'vue' import VueWechatAuth from 'vue-wechat-auth' Vue.use(VueWechatAuth, { appId: 'YOUR_APPID', responseType: 'code', scope: 'snsapi_userinfo', state: 'STATE', redirectUri: 'YOUR_REDIRECT_URI' }) ``` - `appId`:微信开放平台的 AppID。 - `responseType`:授权类型,一般为 `code`。 - `scope`:授权作用域,一般为 `snsapi_userinfo`。 - `state`:自定义参数,可为空。 - `redirectUri`:回调 URL,用于接收授权码。 4. 在需要使用微信登录的页面组件中添加登录按钮,并调用插件提供的 `wechatAuth()` 方法: ```html <template> <button @click="wechatLogin">微信一键登录</button> </template> <script> export default { methods: { wechatLogin() { this.$wechatAuth.redirect() } } } </script> ``` 5. 在回调 URL 页面组件中获取授权码,并调用接口进行登录或获取用户信息: ```html <template> <div> <!-- 获取授权码 --> <input v-model="code" placeholder="请输入授权码" /> <button @click="login">登录</button> </div> </template> <script> export default { data() { return { code: '' } }, methods: { login() { // 使用授权码调用后端接口进行登录或获取用户信息 // ... } } } </script> ``` 以上是一个简单的 Vue 微信一键登录授权的流程,其中的具体实现方式可能根据实际需求和后端接口的不同而有所差异。你可以根据具体情况进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值