微信授权登录前端流程

592 阅读1分钟

微信授权登录

1.跳转微信 获取code

function UrlCode(appId ) {
  // 获取微信code
  const Url = encodeURIComponent(location.href)
  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${Url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
}

2.正则获取url 里边的参数

// zhen获取 当前url 里边的参数
 function getUrlKey(name) {
  return (
    decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) ||
    null
  )
}

3.存token 重定向页面

// 登陆
function tokenNewload() {
  const code = getUrlKey('code')
  const id = getUrlKey('id')
  // 检测本地是否储存token
  if (getToken()) {
    if (code) {
      // 这个微信登录Api
      wxlogin({
        code
      }).then(res => {
        //储存token 到本地
        setToken(res.token)
        // 根据自己需求修改重定向地址
        window.location.replace(window.location.origin + window.location.pathname)
      })
    } else {
      UrlCode()
    }
  }
}

4. 第三步里边的方法

image.png

总结

	如果有更简单的方法,请告知我!嘿嘿 我也学习下