vue 微信授权解决方案

背景

vue前后端分离开发微信授权
2018-08-14更新
时隔四个月第一次更新，因为项目重构有一次接触到了微信授权，思路已经比原来清晰的多了，将重新修改一下整个文章

场景

app将商品分享到微信朋友圈或者分享给微信好友，用户点击页面时进行微信授权登陆，获取用户信息。
问题：没有固定的h5应用首页，回调不能到index。授权后重定向url带参数并且很长

本人愚钝，开发过程中，尝试过很多方法，踩坑不足以形容我的心情，可以说每一次都是一次跳井的体验啊。

1.一开始尝试的方式是前端请求微信连接，返回code，然后code作为再去请求后台接口获取token，后面看到别人的博客说这个方法不好，最好就是直接请求后台接口，然后后台返回url做跳转，所以就采用了最传统的方法，后台返回url，前台跳转。

2.这个时候就出现一个问题，微信授权要跳跳跳，最终想回到第一次点进来时候的链接就蛋疼了，从网上查了一下解决方法，将链接本身作为redirect_uri参数，大概就是这个样子


https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&amp;redirect_uri=*www.admin?http://www.xxx.com/h5/product*&amp;response_type=code&amp;scope=snsapi_userinfo&amp;state=STATE&amp;connect_redirect=1#wechat_redirect

然而我们的前台链接是这个鬼样子的，本身带参数，而且超长，what？微信可能不会接受我长这么丑。/(ㄒoㄒ)/~~

http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y/2K2lvqkluV6Ane4LCAKyPU2tPAPj/MF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU//MaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3U9KuHo8rXCw=

最终放弃了这个方案

3.考虑如何重定向我的前台地址，并且获取token

接下来就是我现在用的方法，bug还有很多，先分享一下我的方法，后期优化或有更好的方法再做修改
在main.js中路由全局钩子判断本地是不是有user_token，也就是微信授权后返回的token，如果没有token，并且当前的路由不是author（专门为了授权而生的页面），那就保存当前的url，比如www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm，然后进入author。那如果本地有token，就是用户之前授权拿到过token并且vuex里没有用户信息，那我就获取用户信息并保存在vuex中，这里遇到一个问题就是token会出现过期的情况，那我就删除了本地的user_token，window.localStorage.removeItem("user_token");刷新页面 router.go(0);这个时候就重新走了一遍如果没有token的情况。
第一版方法

router.beforeEach((to, from, next) =&gt; {//   第一次进入项目let token = window.localStorage.getItem("user_token");if (!token &amp;&amp; to.path != "/author") {window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用户进入的urlnext("/author");return false;} else if (token &amp;&amp; !store.getters.userInfo) {//获取用户信息接口store.dispatch("GetUserInfo", {user_token: token}).catch(err =&gt; {window.localStorage.removeItem("user_token");router.go(0);return false;});}next();});

2018-08-14第二版方法
不同的地方是将跳转判断从author.vue里拿出来放这里了逻辑其实很简单，有token获取信息，没token跳转授权


router.beforeEach((to, from, next) =&gt; {const token = window.localStorage.getItem('user_token')if (token) {if (to.path === '/author') {next({path: '/'})} else {store.dispatch('GetUserInfo', {user_token: token}).then(res =&gt; {// 拉取用户信息next()})}} else {if (to.path !== '/author') {// 保存用户进入的urlif (to.path === '/shop' || to.path === '/product') {window.localStorage.setItem('authUrl', to.fullPath) // 保存用户进入的url}store.dispatch('GetAuthUrl').then(res =&gt; {// 此处返回的是后台拼接的微信授权地址，前台也是可以拼接的，跳转到微信授权window.location.href = res.data.url //https://open.weixin.qq.com/connect/oauth2/authorize?appid=aaaaa&amp;redirect_uri=后端java或php地址&amp;response_type=code&amp;scope=snsapi_userinfo&amp;state=STATE&amp;connect_redirect=1#wechat_redirect})} else {next()}}
})

下面就是进入author.vue的逻辑,第一次进入author， www.xxxx.com/h5/author，判断链接有没有token参数，如果没有就跳微信授权，然后后台会重定向回来并携带token，如： www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200

第一版

&lt;template&gt;&lt;div&gt;
授权中。。。&lt;/div&gt;
&lt;/template&gt;&lt;script&gt;import {getWxAuth} from '@/service/getData'import {GetQueryString } from '@/utils/mixin';export default {data() {return {token: '',};},computed: {},created() {this.token =  window.localStorage.getItem("user_token");//判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url//就是前面说的ReturnGetCodeUrl方法if (!GetQueryString("token")) {this.ReturnGetCodeUrl();} else {//如果有token，如http://www.xxxx.com/h5/author?token=xxxxxxxxx&amp;msg=200，这里的参数就是后台重定向到前台http://www.xxxx.com/h5/author，并携带的参数。这样就可以拿到我们想要的token了//判断一下后台返回的状态码msg，因为可能出现微信拿不到token的情况let msg = GetQueryString("msg")if (msg = 200) {this.token = GetQueryString("token");//存储token到本地window.localStorage.setItem("user_token", this.token);//获取beforeLoginUrl，我们的前端页面let url =  window.localStorage.getItem("beforeLoginUrl");//跳转this.$router.push(url);//删除本地beforeLoginUrlremoveLocalStorage("beforeLoginUrl");}else{//msg不是200的情况，可能跳到404的错误页面}}},methods: {async ReturnGetCodeUrl() {let {data} = await getWxAuth({});if (data.status == 200) {window.location.href = data.url;}},},watch: {},components: {},mounted: function () {}}
&lt;/script&gt;
&lt;style lang='scss' scoped&gt;&lt;/style&gt;

GetQueryString方法

mixin.js


export const GetQueryString = name =&gt; {var url = new RegExp("(^|&amp;)"   name   "=([^&amp;]*)(&amp;|$)");var newUrl = window.location.search.substr(1).match(url);if (newUrl != null) {return unescape(newUrl[2]);} else {return false;}
};

第二版
只用来后台拿到参数返回到author页面后的携带的参数如果获取成功则跳转到授权之前保存的url如果失败提示用户关闭网页重新授权，另外有一点值得注意，微信名里有特殊字符的需要转码要不授权会失败


&lt;!-- author --&gt;
&lt;template&gt;&lt;div&gt;授权中。。。&lt;/div&gt;
&lt;/template&gt;&lt;script&gt;import {mapGetters} from 'vuex'import {Toast} from 'mint-ui'import {GetQueryString,setLocalStorage,getLocalStorage,removeLocalStorage} from '@/utils'export default {data() {return {token: ''}},computed: {...mapGetters(['userInfo'])},created() {const wxtoken = GetQueryString('token')const code = GetQueryString('msg')if (wxtoken &amp;&amp; Number(code) === 200) {setLocalStorage('user_token', wxtoken)const historyUrl = getLocalStorage('authUrl')this.$router.replace(historyUrl)//  removeLocalStorage('authUrl')} else {// 没有拿到后台访问微信返回的tokenToast('授权失败请关闭网页重新进入')removeLocalStorage('share_token')removeLocalStorage('authUrl')}}}&lt;/script&gt;
&lt;style lang='scss' scoped&gt;&lt;/style&gt;

整个过程是可以实现授权，但是觉得代码写得不好，以后的开发中希望能够有更优的方法。希望能和大家交流学习。
2018-08-14更新，总结一下，第二次开发流程做了简化，但是整个思路还是一样，我之前想到过另外一种方法，是将我的那串长参数先保存在本地，然后去授权的时候就可以让后台帮我跳转到固定页面如/product我在从本地拿参数解析，这个方法应该也是可行的，下次尝试后更新

原文地址：https://segmentfault.com/a/1190000014255151

更多专业前端知识，请上【猿2048】www.mk2048.com

vue 微信授权解决方案相关推荐

h5微信本地调试 vue_vue微信授权解决方案[如何本地实现授权]
之前是自己太年轻,写什么[最终解决方案].这一次的项目vue移动端电商项目,做了很多的优化.大家都知道授权需要每次都要发布到线上,本地的需要代理,这让我们很头疼.后面会介绍一个本地直接授权的方式,真的 ...
vue获取微信登陆权限_vue 微信授权登录解决方案
背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息. 问题:没有固定的h5应用首页.授权后重定向url带参数并且很长 ...
.net开发 abp框架+vue的微信公众号的微信授权
1.在进行微信开发之前你首先你得需要一个微信公众号(具体的申请步骤省略) 2.进行微信开发的开发配置(我这里是配置一个测试账号后面的微信支付还是要走微信公众号配置是一样的) URL为微信开发 ...
Vue 移动端 hash模式下微信授权登录
需求分析: 1.移动端微信公众号项目,需要获取微信授权进行登录 2.默认打开首页,在路由进入之前进行判断,有如下三种情况 3.本项目有两种账号类型:商家.企业,需在登录页进行选择未授权过,跳到微信授 ...
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
前言最近刚好在做这方面的功能,就网上看了下,发现很多种写法,但是有些写的很乱, 我也看的很麻烦,干脆就自己写一个简单的静态版本放在这, 以后需要用到的时候可以直接拿着改改就能用. 后面我还会继续更新 ...
微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
vue hash模式下微信授权登录
背景 vue-cli项目.路由是hash模式.需要授权的场景有:项目入口处(App.vue),指定页面(创建时.methods 方法内):可以携带参数思路由于hash模式# 号的存在,授权后链接会 ...
端内APP分享到微信,微信打开卡片拉起微信授权vue
官网:网页授权链接(公众号) 通过拉起授权获取code值,把code值给后端,通过接口再拿到openId 代码写在main.js中,先render避免拉起的时候闪一下第一种:适用于一进页面就拉起授权 ...
vue微信公众号授权开发流程
vue微信公众号授权开发流程项目采用的是vue2.0开发的,还未更新到vue3.0.项目描述:只有通过微信授权登录,不需要绑定手机号. 1.注册公众号,这个不多说了 2.配置公众号在[公众号设置] ...

vue 微信授权解决方案

背景

场景

vue 微信授权解决方案相关推荐

最新文章

热门文章