基于vue的微信授权

一.如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

二.关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

三.授权登录流程

详细说明：

用户访问网站主域名
vue客户端(domain/)接收请求，在路由解析前判断用户是否登录（比如检查cookie）；
如果没有登录，则通过api获取微信授权地址，获取后跳转到微信授权页面；
用户确认授权，微信服务器发起回调请求，这时回调到服务器端（domain/api/xxx）
服务器端保存用户信息，进行注册登录操作（记录cookie），重定向到vue客户端（domain/）
重复第一步，授权登录成功

四.具体代码如下



router.beforeEach((to, from, next) => {
  if ((!VueCookie.get('user') && !store.state.userInfo)) {
    // 第一次访问
    console.log('授权登录')
    // 跳转到微信授权页面，微信授权地址通过服务端获得
    axios.post('/api/login').then(res => {
      var data = res.data
      if (data.code === 100) {
        window.location.href = data.data
      }
    })
  } else if (!store.state.userInfo) {
    // 刷新页面，获取数据存入vuex
    axios.get('/api/currentuser').then(res => {
      if (res.data.code === 100) {
        store.dispatch('setUserInfo', res.data.data)
        next()
      }
    })
    console.log('cookie生效期内登录')
    next()
  } else {
    // 已经登录
    console.log('已登录')
    next()
  }
})

//... other code

基于vue的微信授权

猜你喜欢