Vue实现微信公众号授权登录

新建个文件wechatAuth.js
这个文件可以不用更改

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

在main.js里

import wechatAuth from './axios/wechatAuth'//这里是配置微信公众号的appid
Vue.use(wechatAuth, {appid: "123",scope: 'snsapi_userinfo',
})

在router里的js里

import Vue from 'vue'
import Router from 'vue-router'
import wechatAuth from '../axios/wechatAuth'
import axios from 'axios'
Vue.use(Router)
Vue.prototype.$axios = axios;
import {Dialog
} from "vant";

在路由里配置路由守卫

//截取code
function getCode() {var url = location.search;var code = "";if (url.indexOf("?") != -1) {var split = url.split("?code=")code = split[1].split("&")[0]}return code;
}// 获取sign
function getSign(next) {let theCode = getCode();if (theCode) {var formData = new FormData();formData.append("code", theCode);axios({method: "post",url: "http:api",data: formData}).then(res => {if (res.data.status == 1) {localStorage.setItem("wx_sign", res.data.data.sign);let realUrl = window.location.href.split("?")[0];window.location.href = realUrl;next()} else {Dialog.alert({title: '提示',message: res.data.msg,}).then(() => {WeixinJSBridge.call('closeWindow')})}});} else if (localStorage.getItem("wx_sign") == null) {wechatAuth.redirectUri = window.location.hrefwindow.location.href = wechatAuth.authUrl} else {next()}
}router.beforeEach((to, from, next) => {window.document.title = to.meta.title;if (process.env.NODE_ENV == "production") {getSign(next)} else {next();}
});

Vue实现微信公众号授权登录相关推荐

vue移动端项目微信公众号授权登录
前言在我们做移动端项目时, 很多功能是以登录后才能进行后续的操作, 并且许多pc端的网页都有微信扫码登录功能, 为了做到pc与移动端统一, 往往移动端项目需要添加微信登录功能, 那么为什么手机端不能 ...
vue h5微信公众号授权获取用户信息
vue h5微信公众号授权获取用户信息 1.申请测试账号 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 2.修改网页授权 ...
RuoYi-App移动版（uni-app）微信公众号授权登录
前言略 uni-app 未提供微信公众号授权登录 uni.login是一个客户端API,统一封装了各个平台的各种常见的登录方式,包括App手机号一键登陆.三方登录(微信.微博.QQ.Apple.go ...
微信公众号授权登录（asp.net + angular）
微信是时下最火的,上面有数以亿计的用户,如果能接入微信将大大减低注册门槛,当然,接入微信登录是有门槛的.微信登录一般有两个,一个是微信开放平台授权登录,一个是微信公众号授权登录,两者都需要认证才可以继 ...
Java在Web端微信公众号授权登录
Java在Web端微信公众号授权登录 1.需要在微信开发平台配置 url:是自己服务中的微信需要推给你的地址(需要使用二级域名,可以去添加链接描述)购买9块钱1个月使用权或者白嫖都可 token 这个 ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
【SpringBoot学习】46、SpringBoot 集成 Uniapp 实现微信公众号授权登录
文章目录一.公众号环境搭建二.Spring Boot 集成微信公众号 1.application.yml 微信配置 2.控制层接口三.Uniapp 实现授权登录一.公众号环境搭建本篇文章使用 ...
uni-app 对FastAdmin微信公众号授权登录实例
uni-app 对FastAdmin微信公众号授权登录实例 uniapp 微信公众号授权登录代码跳转获取code 提交fastadmin 第三方登录插件进行登录验证存储token onLoad( ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...

Vue实现微信公众号授权登录

Vue实现微信公众号授权登录相关推荐

最新文章

热门文章