const baseurl = "//xxx"
// 解析url参数并获取codefunction getUrlParam(name) {   //name为要获取的参数名var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var rrr = decodeURIComponent(window.location.search);var r = rrr.substr(1).match(reg);if(r != null) return unescape(r[2]);return null;  }
// 请求微信服务器获取code 方法
function getUserCode() {redirectURL = encodeURI((baseurl + window.location.pathname + window.location.search).split('&code')[0]);//获取地址const base = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=';let state;let surl;let reserveUrl;let appid = "";let scope = "1";window.location.href =base + appid +'&redirect_uri='+ redirectURL +'&response_type=code&scope='+ scope +  '#wechat_redirect';
}// 路由变化时router.beforeEach((to, from, next) => {//读取sessionStorage的userlet user = JSON.parse(sessionStorage.getItem('user'));//这里可以在开发生产环境下 加测试用户信息存储到sessionStorageif(document.domain == "127.0.0.1"){//本地环境sessionStorage.setItem('user', JSON.stringify({uid     : 'eyJhbGciOiJIUzI1NiJ9.eyJ0IjoiNjY1NDA6MTU1NzQ0ODE2MiJ9.Dt4QHKq58GOdI_j8GhK0o3SkyWwHDlfeHR0nh1nEgsw',identity: 1}));store.commit('updateUser', {"uid":"eyJhbGciOiJIUzI1NiJ9.eyJ0IjoiNjY1NDA6MTU1NzQ0ODE2MiJ9.Dt4QHKq58GOdI_j8GhK0o3SkyWwHDlfeHR0nh1nEgsw","user_id":66540,"identity":1,"avatar":"http://chaofenxiang.vip/data/attachment/avatar/1904/28/ef0b7277767425348af3503e0759eacd.png","nickname":"小义","sex":"女","mobile":"15070026795"});//赋值本地存储}// 已登录 if (user) { next();//释放路由 如果已经登录 } // 未登录 且不是在测试环境下if (!user && document.domain != "127.0.0.1") {const code = getUrlParam('code');//获取url 上面的code// 还未完成微信授权if (!code) {//假如没codegetUserCode();//请求微信服务器获取code}// 已完成微信授权 假如已经获取到了codeif (code) {//使用code 去登录axios.get("/xxxx", {//params: {code: code,}}).then(res => {if (res.status == 200) {let userInfo = res.data.userInfo;sessionStorage.setItem('user', JSON.stringify(userInfo));// 存sessionStorage                     next();} else {}}).catch(err => {//登录失败,请刷新重试}); }}else{next();}});//ps 代码放在main.js 里面仅供参考

  

转载于:https://www.cnblogs.com/shaozhu520/p/11321955.html

vue开发公众号 在钩子里面处理登录获取code相关推荐

  1. 如何使用vue开发公众号网页

    通过vue-cli创建项目 安装脚手架工具 npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目 vue create water_ ...

  2. 开发公众号H5本地调试重定向登录流程

    微信公众号的网页开发授权微信信息,是需要重定向到微信的一个地址,然后重定向返回的,并且重定向返回的地址需要在公众号后台去配置域名,我们想要在本地调试此功能,就需要在本地做一个域名映射来实现: 第一步: ...

  3. vue开发公众号-关闭浏览器返回主公众号

    setTimeout(()=>{// 两种方法都行 不加setTimeout方法二可能失效//方法1:不需要jssdkdocument.addEventListener('WeixinJSBri ...

  4. vue websocket 公众号扫描二维码登录PC端

    首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...

  5. (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班

    (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班 从零到壹全栈部落 产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...

  6. vue 微信公众号开发

    vue 微信公众号开发 开题 上个月初入职了一家新公司.来了新公司很忙.本来计划是在上个月底写一篇博客的,写一下关于新公司的事情. 几度思考之后还是没写.也许做程序员接手别人的项目,都会说别人的项目多 ...

  7. vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分 ...

  8. vue微信公众号授权开发流程

    vue微信公众号授权开发流程 项目采用的是vue2.0开发的,还未更新到vue3.0.项目描述:只有通过微信授权登录,不需要绑定手机号. 1.注册公众号,这个不多说了 2.配置公众号 在[公众号设置] ...

  9. vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付

    本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...

最新文章

  1. 显卡位宽和带宽的区别
  2. 【从零学习openCV】IOS7下的人脸检測
  3. Python学习之字符串
  4. 公用技术——设计模式5——创建型模式——建造者模式——待补充
  5. 【渝粤教育】国家开放大学2018年春季 0025-21T数据结构 参考试题
  6. JSP 简介(转载)
  7. Microsoft Dynamics CRM Server 2011安装配置
  8. 亲测有效!实现Chrome浏览器下载速度提升3倍!
  9. 期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
  10. day53_电力系统_ztree动态生成权限控制
  11. 高胜美------《笑拥江山梦》
  12. golang快速入门[6.2]-集成开发环境-emacs详解
  13. 数据结构之树家族介绍
  14. 微信支付接口调用问题(android正常,iphone调不起)
  15. krpano中视角js动态指向
  16. 鼎捷APS助力茶花家居实现智能高效生产排程
  17. Python求多元函数的极小值
  18. mysql实现统计查询_MySQL 统计查询实现代码
  19. 10分钟,我写完了8小时的CSS样式,我真棒!
  20. CTF中常见密码学(一)

热门文章

  1. 京东数据库运维自动化体系建设之路
  2. 论文笔记 EMNLP 2020|Edge-Enhanced Graph Convolution Networks for Event Detection with Syntactic Relation
  3. SQLite 免费查看工具
  4. 分享一个开源免费、目前最好的API接口管理平台----eoLinker
  5. office 2007 word空格消失的问题
  6. 红米k30至尊纪念版和华为mate30pro哪个值得买
  7. 互联网和大数据是什么意思_数据化和互联网行业 互联网大数据什么意思
  8. diy 单片机 自动浇花_基于单片机的自动浇花系统
  9. 使用Matlab工具箱(procamcalib)进行投影仪标定---超详细过程
  10. 18.移动点餐端搭建----点餐系统移动端