vue移动端微信授权登录插件封装

新建`wechatAuth.js`文件

const qs = require('qs')
//应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
const SCOPES = ['snsapi_base', 'snsapi_userinfo']class VueWechatAuthPlugin {constructor () {this.appid = nullthis.redirect_uri = nullthis.scope = SCOPES[1]this._code = nullthis._redirect_uri = null}install (Vue, options) {let wechatAuth = thisthis.setAppId(options.appid)Vue.mixin({created: function () {this.$wechatAuth = wechatAuth},})}static makeState () {return Math.random().toString(36).substring(2, 15) +Math.random().toString(36).substring(2, 15)}setAppId (appid) {this.appid = appid}set redirect_uri (redirect_uri) {this._redirect_uri = encodeURIComponent(redirect_uri)}get redirect_uri () {return this._redirect_uri}get state () {return localStorage.getItem('wechat_auth:state')}set state (state) {localStorage.setItem('wechat_auth:state', state)}get authUrl () {if (this.appid === null) {throw 'appid must not be null'}if (this.redirect_uri === null) {throw 'redirect uri must not be null'}this.state = VueWechatAuthPlugin.makeState()return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`}returnFromWechat (redirect_uri) {let parsedUrl = qs.parse(redirect_uri.split('?')[1])if (process.env.NODE_ENV === 'development') {// console.log('parsedUrl: ', parsedUrl)this.state = nullthis._code = parsedUrl.code} else {if (this.state === null) {throw 'You did\'t set state'}if (parsedUrl.state === this.state) {this.state = nullthis._code = parsedUrl.code} else {this.state = nullthrow `Wrong state: ${parsedUrl.state}`}}}get code () {if (this._code === null) {throw 'Not get the code from wechat server!'}// console.log(this)// console.log('this._code: ' + this._code)let code = this._codethis._code = null// console.log('code: ' + code)return code}
}const vueWechatAuthPlugin = new VueWechatAuthPlugin()if (typeof window !== 'undefined' && window.Vue) {window.Vue.use(VueWechatAuthPlugin)
}export default vueWechatAuthPlugin

main.js中导入

import wechatAuth from './plugins/wechatAuth'//微信登录插件
const qs= require('qs');Vue.use(wechatAuth, {appid: XXXXXXXXX});

路由钩子中可以进行相关操作

router.beforeEach((to, from, next) => {if (store.state.loginStatus == 0) {//微信未授权登录跳转到授权登录页面let url = window.location.href;//解决重复登录url添加重复的code与state问题let parseUrl = qs.parse(url.split('?')[1]);let loginUrl;if (parseUrl.code && parseUrl.state) {delete parseUrl.code;delete parseUrl.state;loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}`;} else {loginUrl = url;}wechatAuth.redirect_uri = loginUrl;store.dispatch('setLoginStatus', 1);window.location.href = wechatAuth.authUrl} else if (store.state.loginStatus == 1) {try {wechatAuth.returnFromWechat(to.fullPath);} catch (err) {store.dispatch('setLoginStatus', 0)next()}store.dispatch('loginWechatAuth', wechatAuth.code).then((res) => {if (res.status == 1) {store.dispatch('setLoginStatus', 2)} else {store.dispatch('setLoginStatus', 0)}next()}).catch((err) => {next()})}else {next()}
});

GitHub地址：vue-wechat-login

2020.11.07更新：代码进行vue 3.0 typescript重构。
2021.03.15更新：新增vite版本。

vue移动端微信授权登录插件封装相关推荐

微信授权登录-微信公众号和PC端网站
一.微信公众号授权登录--微信公众平台微信授权登录,并调用后台接口,获取用户信息 1.网页授权回调域名首先要在公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授 ...
Vue 移动端 hash模式下微信授权登录
需求分析: 1.移动端微信公众号项目,需要获取微信授权进行登录 2.默认打开首页,在路由进入之前进行判断,有如下三种情况 3.本项目有两种账号类型:商家.企业,需在登录页进行选择未授权过,跳到微信授 ...
微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
VUE 实现公众号网页微信授权登录
这里不做过多的解释,具体了解见官网文档. 网页授权官方文档需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...
springboot微信授权登录
水平有限!实现方法直接找的网上的以为大神所编写的api来实现,这里主要是记录一下自己实现的过程.具体方法请参考网址:https://github.com/liyiorg/weixin-popular, ...
硅谷课堂 12_公众号消息和微信授权登录
硅谷课堂第十二天-公众号消息和微信授权登录文章目录硅谷课堂第十二天-公众号消息和微信授权登录一.公众号普通消息 1.实现目标 2.消息接入 2.1.公众号服务器配置 2.2.验证来自微信服务器消 ...
iOS微信授权登录集成
iOS微信授权登录集成 iOS微信授权登录集成,具体的过程参考官方的文档微信集成官方Demo地址: iOS资源下载不错的文章: iOS微信登录集成 iOS 微信第三方登录的简单实现准备工作 1. ...
uniappH5+springboot微信授权登录获取用户数据(非静默授权)
uniappH5+springboot微信授权登录获取用户数据(非静默授权) 微信网页授权开发文档准备工作微信公众号appid和appSecret及配置相关的ip白名单配置网页授权域名,具体操作 ...
慕课网_《微信授权登录》学习总结
时间:2017年08月12日星期六说明:本文部分内容均来自慕课网.@慕课网:http://www.imooc.com 教学源码:无学习源码:https://github.com/zccodere/ ...

vue移动端微信授权登录插件封装

新建`wechatAuth.js`文件

main.js中导入

路由钩子中可以进行相关操作

vue移动端微信授权登录插件封装相关推荐

最新文章

热门文章

vue移动端微信授权登录插件封装

新建wechatAuth.js文件

main.js中导入

路由钩子中可以进行相关操作

vue移动端微信授权登录插件封装相关推荐

最新文章

热门文章

新建`wechatAuth.js`文件