Vue 移动端 hash模式下微信授权登录

需求分析：

1.移动端微信公众号项目，需要获取微信授权进行登录
2.默认打开首页，在路由进入之前进行判断，有如下三种情况
3.本项目有两种账号类型：商家、企业，需在登录页进行选择

未授权过，跳到微信授权登录页，然后再跳到登录页
有授权过，并且本地有登录的用户信息，跳到首页
有授权过，但本地没有登录的用户信息，跳到登录页

我遇到问题的一些相关知识点：

1.路由模式：hash

因为hash模式下，url是带#的，微信授权登录时候的 redirect_uri 这里跳转后需要处理下。

2.router.beforeEach：进入路由之前执行，一般用来做一些进入页面的限制。

开发过程中，这里遇到了死循环的情况。
是否对路由进行前置守卫的判断条件问题

3.微信授权登录

js接口安全域名问题和授权回调页面域名的配置问题，都不可以带http/https ，可参考上一篇微信公众号测试号配置

4.localStorage 和sessionStorage的问题

因为使用环境是微信浏览器，当关闭页面后，sessionStorage存储的数据会被清除掉，localStorage只有手动清除缓存时才会被清除。
我这里是每次打开首页时都判断是否授权登录过，所以存储的数据要一直保存，所以要用localStorage
过程中做过测试，通过微信的设置页点击清除缓存数据按钮，并不能清除掉localStorage的数据，所以测试中涉及到多账号切换的话，可以临时添加一个清除缓存按钮，正式环境再去掉就可以（localStorage.clear()）

router文件夹下的 index.js 代码：

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/assets/store'Vue.use(Router)const routes =[
{path: '/login', name: 'login',      component: resolve => require(['@/pages/login'], resolve),meta: {title: '智能家居',},        },{path: '/', name: 'index',      component: resolve => require(['@/pages/index'], resolve),meta: {title: '智能家居',requireAuth: true, // 规定需要权限才能进入},      },
]
const router = new Router({linkActiveClass: 'active',routes
})router.beforeEach((to, from, next) => { var href = window.location.href;let origin = window.location.origin;let redirect_uri = encodeURIComponent(origin + '/index.html#/')  // 授权登陆后的回调地址，需要进行encodeURIComponent处理let appid = "" // 写自己公众号的appidlet code = to.query.code // 获取路径中的code参数，确认授权后微信会自动跳转到 redirect_uri ，参数code会拼接到地址后边，后续登录我需要这里的code传给后台，code只能用一次let token = localStorage.getItem("token"),usertype = localStorage.getItem("usertype")// 这里很重要，因为router.beforeEach 是每次进入路由前都会执行的，微信登录授权后跳转的路径格式如下：https://m.baidu.com/index.html?code=123&state=1#/// hash模式下，跳转的url并不会按我们想的那样，把#拼在index.html后边，而是会加在url的参数的最后，所以这里要做一下判断，如果是从微信跳转来的，就直接带着我需要的参数code跳到登录页if (href.includes("com/index.html?code")) {  //url包括 com/?code 证明为从微信登录授权跳转回来的 window.location.replace(origin + '/index.html#/login?' + location.href.split('?')[1]);//拼接跳转  } else {if(to.meta.requireAuth) { // 这个很重要，我尝试过直接判断路径是否是首页的方式，结果苹果手机没有问题，安卓手机全部都是死循环一直跳到授权登录页。使用to.meta.requireAuth 这样就正常了。if(code&&!token&&!usertype){ // 有code且没有token和角色（已授权未登录）localStorage.setItem("code",code) // 保存code,跳到登录页next('/login');} else if (!code&&token&&usertype) { //已登录，有tokennext();} else if(!code&&!token&&!usertype) { //未授权未登录，没有token和角色//获取授权window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"} } else { // 当不是首页时，直接进入路由next();}}
})
export default router

2020.11.4更新

产品需求发生了一点变化，这里记录一下。

之前：项目入口只有一个，即点击公众号的一个菜单进入首页，在首页路由进入前，进行一些列的利用本地存储的数据相关的判断，然后判断要不要获取微信授权登录、要不要跳到登录页等

现在：项目入口改为两个，即公众号的菜单由之前的一个变成了两个：商家/企业，不需要登录页，同一个用户账号类型不可改变。如果已经是商家账号，再点企业的菜单想进入，就会跳到提示页，提示已是商家账号，然后再跳到商家的首页。

过程：开始是在之前的代码基础上改的，利用本地存储来存储账号类型用户id等数据，后来产品测试过程中要频繁测试两个账号，还要清除本地缓存的数据，而且中间问题频出，于是放弃了利用本地存储的方式

最终实现：每次从公众号菜单栏点进去，都进行一次微信授权登录跳到登录页，根据登录接口后台返回的结果判断，如果点击的是第一次登录时的账号类型，就直接跳到首页，如果不是，就跳到提示页。

代码

有改动的 router 文件夹下的 index.js 部分代码
注：

公众号商家入口url: https://m.baidu.com/index.html#/?usertype=1
公众号企业入口url: https://m.baidu.com/index.html#/?usertype=2

router.beforeEach((to, from, next) => { var href = window.location.href;let origin = window.location.origin;let redirect_uri = encodeURIComponent(origin + '/index.html#/') //redirect_uri，授权登陆后的回调地址，需要进行encodeURIComponent处理let appid = "" // 公众号的appidlet code = to.query.code, state = to.query.state, usertypes = to.query.usertypeif(usertypes) { // 判断是按钮点进来的，记录点击类型localStorage.setItem("usertypes",usertypes);// console.log("是按钮点进来的，设置usertypes缓存")}if (href.includes("com/index.html?code")) {  //url包括 com/?code 证明为从微信跳转回来的 // console.log("从微信授权跳转过来的")window.location.replace(origin + '/index.html#/login?' + location.href.split('?')[1]);//拼接跳转  } else { if(to.meta.requireAuth) { // 首页// console.log("确定是首页")if (usertypes) { // 从按钮点进来的// console.log("从按钮点进来的");//获取授权window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"} else { // 不是从按钮点进来next();}} else { // 其他页面next();}}
})

登录页

created(){this.code = this.$route.query.code || localStorage.getItem("code");if(this.code) {localStorage.setItem("code", this.code);}// console.log("code是" + this.code + "进入了登录页");this.getToken();},methods:{getToken() {let types = localStorage.getItem('usertypes');let code = this.code + '=' + types;getToken(code).then((res) => { if(res.data.code == 500) { // 账号类型错误this.$store.dispatch('set_token',res.data.userId); // 获取返回的结果设置缓存this.$router.replace({ // 跳到提示页path: '/tips'   })} else if(res.data.code == 0) {  // 登录成功this.$store.dispatch('set_token',res.data.user.userId); // 获取返回的结果设置缓存this.$store.dispatch('set_usertype',res.data.user.type); this.$router.replace({ path:'/', }) } else { this.$Message.error(res.data.msg); } }) },},

Vue 移动端 hash模式下微信授权登录相关推荐

vue hash模式下微信授权登录
背景 vue-cli项目.路由是hash模式.需要授权的场景有:项目入口处(App.vue),指定页面(创建时.methods 方法内):可以携带参数思路由于hash模式# 号的存在,授权后链接会 ...
解决vue路由hash模式下,微信网页授权问题
解决vue路由hash模式下,微信网页授权问题本人开发负责微信公众号端,菜单都是自定义菜单,然后每个菜单路径都是经过授权如:http://xxxx.com/ceshi/wechat/authoriz ...
vue/react的hash模式下的锚点效果
就是如链接所示:http://oa-img.oss-cn-qingdao.aliyuncs.com/up-img/pic-60044/xknTNnFHsxFaEJYJ3P5ZD82jnfXWTjHj. ...
Vue 爬坑之旅 -- history 路由模式下微信分享爬坑总结
现在做 H5 开发,微信平台基本是一个绕不过去的坑,这里面又分为微信授权和微信分享.说它坑,主要提现在以下几个方面: 文档不够清晰详细.开发文档这块是国内所有互联网公司的通病,文档写的不清不楚,长期不 ...
微信分享的链接，手机打开白屏，单页面应用(Hash模式下)，实现微信分享
前言:现在将相关的产品分享至朋友圈,进行宣传,成为一种很常见的方式.本文,主要想分享一下,微信分享所遇到的坑,微信分享的链接,手机打开白屏,以及产生的原因. 前端微信分享的基本步骤: 一.绑定域名先 ...
vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
微信授权登录mock（在没有真实微信账号的情况下测试大量微信账户授权登录的情况）...
场景介绍对于构建在微信公众号的系统,帐号体系往往使用微信授权登录(如各类微信商城应用系统). 这样操作不仅可以实现静默注册,对用户几乎是无感的,同时也达到了区分用户,获取用户基本信息(头像,昵称等) ...
微信授权登录-微信公众号和PC端网站
一.微信公众号授权登录--微信公众平台微信授权登录,并调用后台接口,获取用户信息 1.网页授权回调域名首先要在公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授 ...
router锚点和html锚点,hash模式下Vue-router页面返回锚点（scroll behavior）实现
在普通页面中,点击浏览器的返回按钮,在返回到上一页时会处在上次浏览的位置.单页面应用中,由于始终是同一个页面, 因此需要自行实现页面返回时的锚点.Vue-router的Scroll Behavior可 ...

Vue 移动端 hash模式下微信授权登录

Vue 移动端 hash模式下微信授权登录相关推荐

最新文章

热门文章