微信公众号之微信登录

前言

实现前端纯微信登录，用服务器代理请求，不走自己的后台

实现

思路

1.通过vue路由守卫拦截用户，判断是否存在openid，有就直接进入url
2.没有openid，跳转得到登录页面（author.vue）
3.通过cookie来查询用户是不是第一次进入，如果是就去微信第三方获取code
4.通过code获取token，openid，re_openid(刷新token用的)，将openid和re_token存入cookie
5.通过token获取用户信息

流程图

可能上面没有说清楚，请看流程图：附:微信官方文档

核心代理

路由守卫

router.beforeEach((to,from,next) => {if(to.path == '/author' && store.state.wx.openid != ''){// 用户使用后退返回到授权页，则默认回到首页next('/wx/md/center')return false}if(store.state.wx.openid === '' && to.path != '/author'){// 之前有获取过授权Cookies.set('url', to.fullPath);next('/author')return false}next()
});

author.vue

<template><div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580749534450&di=df7d5cccb9df655492e4ff11983d4289&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn16%2F133%2Fw640h1093%2F20180721%2F8c39-hfqtahi3500949.jpg" width="100%" height="100%"/></div>
</template><script>import * as wx from '@/module/wxjw/api/wx'import {login} from "../module/wxjw/api/http";export default {data(){return{}},methods:{//第一次登录，没有re_token的情况，或者过期了wxLogin(){let code = wx.getCode();if (!code) {wx.auth();} else {//code存在，换取tokenwx.getToken(code).then((res) => {this.okLogin(res);})}},// token有效性检测  更新用户信息isToken(token,openid){wx.isToken(token,openid).then(res => {if(res.errcode === 0){// 有效wx.getUser(token,openid).then(res => {console.log('登录成功:'+ res.openid);this.$store.commit('setUser', res);})}else{//无效console.log('token失效:  '+token);this.updataToken();}});},//更新tokenupdataToken(){//以前是否授权if(this.$cookies.isKey('wxuser')){// re_token是否有效let wxuser = this.$cookies.get('wxuser');wx.getTokenByRetoken(wxuser.re_token).then( res => {if(res.errcode == 40029||res.errcode == 40001||res.errcode == 40030){// 无效，获取token失败，查询登录this.wxLogin();}else{this.okLogin(res);}})}else{// 第一次进入，重新授权console.log('第一次进入')this.wxLogin();}},// 本地化okLogin(res){//存cookiethis.$cookies.remove('wxuser')this.$cookies.set('wxuser',{re_token : res.refresh_token,openid : res.openid});//更新tokenthis.$store.commit('setToken', res.access_token);//更新用户信息this.isToken(res.access_token,res.openid);//登录完成，存入openIDthis.$store.commit('setOpenid', res.openid);// 转跳urllet url = this.$cookies.get('url');if(this.$cookies.get('url')=='/'){url = '/wx/md/center'}window.location.href = '/#'+ url;this.$cookies.remove('url');}},created(){this.updataToken();}}
</script>
<style scoped></style>

微信公众号之微信登录相关推荐

【微信公众号H5授权登录】
微信公众号H5授权登录废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...
通过微信公众号实现H5登录授权
通过微信公众号实现H5登录授权一.相关配置 1.配置参数测试公众平台信息(测试号相关配置示例) 2.配置JS接口安全域名 3.扫码关注公众号 4.添加网页授权地址这里是指微信授权回调页面,同时发现 ...
手把手教程用Java实现微信公众号扫码登录功能
文章目录前言一.环境准备二.使用步骤 1. 使用微信工具包 2. 创建数据表 3. 登录页面代码逻辑 4. 验证微信公众号登录总结前言微信现今是我们必不可少的社交工具了,围绕微信这个生态实 ...
实现支持多公众号的微信公众号扫码登录服务
实现支持多公众号的微信公众号扫码登录服务最近,在公司的通行证项目开发过程中,需求方提出了支持微信公众号扫码登录,并且可以支持多公众号接入的需求.研究了一下微信公众号的开发文档,实现微信公众号扫码登录 ...
微信公众号网页授权登录的超简单实现步骤
微信开放平台为第三方移动程序提供分享.传播的接口, 使用户可将第三方程序的内容发布给好友或分享至朋友圈, 下面这篇文章主要给大家介绍了关于微信公众号网页授权登录的超简单实现方法, 需要的朋友可以参考下 ...
微信公众号给微信用户推送信息模板信息
该功能主要是用于利用微信公众号向微信用户推送与用户相关的信息,在开发此功能之前需要获取到微信公众号的access_token,以及微信公众号的模板id 为了保证用户不受到骚扰,在开发者出现需要主动提醒 ...
python 微信公众号，微信小程序wechatpy的使用
第一章 Python 微信公众号,小程序入门之wechatpy的使用文章目录第一章 Python 微信公众号,小程序入门之wechatpy的使用前言一.wechatpy是什么? 二.微信公众号 ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
springboot+h5页面+微信公众号获取微信用户信息
springboot项目,h5页面通过微信公众号获取微信用户信息最近本人有一个项目需求,微信公众号里点击一个菜单进入一个商城购物系统. 对于在微信公众号还是小白的我来说难度有点大,但是做完后发现也就 ...
springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证
转:springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证开发前必读以及准备工作: 1.微信公众平台开发是指为微信公众号进行业务开发,为移动应用.PC端网站.公众号第三方平台 ...

微信公众号之微信登录

前言

实现

思路

流程图

核心代理

路由守卫

author.vue

微信公众号之微信登录相关推荐

最新文章

热门文章