回头实践得到的最终版

• 全局前置守卫，main.js引入即可
• 把路由守卫当作页面created里的一个函数，next()时 即执行页面内的东西
• 由于window.location.href跳转需要时间，若没有return，会导致梳理路由后，还没通过window.location.href跳转成功时，已经执行next() 进入页面了，进而导致页面内获取不到code 又去跳微信授权

import router from './router/index'

// 微信授权后 回调的路由是乱的，捋顺后重新跳
router.beforeEach((to, from, next) => {
  let url = window.location.href
  if (url.indexOf('/?code') > -1) {
    const hasQuery = url.match(/\?/g)
    
    let path = url.match(/#.*$/)
    url = url.replace(/#.*$/, '')
    url = url.replace(/\/\?/, `/${path[0]}${hasQuery.length > 1 ? '&' : '?'}`)
    window.location.href = url
    return //！！！！！！
  }
  next()
})

• 下边的是之前没深入思考时 浅显实践

非静默授权

• 该方法往往是页面加载完成后，用户触摸页面时 判断当前链接里是否有code 进而决定 要不要跳转授权链接
• 特征：此时页面已经完全展示，路由守卫已经起作用了

要处理的情况

http://dev.ganhuola.com/my/?code=JSynfueD4d5WBCy6sADMGQXYk&state=STATE#/home
--->
http://dev.ganhuola.com/my/#/home?code=JSynfueD4d5WBCy6sADMGQXYk&state=STATE

http://dev.ganhuola.com/my/?code=JSynfueD4d5WBCy6sADMGQXYk&state=STATE#/home?name=123
--->
http://dev.ganhuola.com/my/#/home?name=123&code=JSynfueD4d5WBCy6sADMGQXYk&state=STATE

策略

增加permisson.js

import router from './router/index' //引入router实例写全局前置守卫

// 微信授权后 回调的路由是乱的，捋顺后重新跳
router.beforeEach((to, from, next) => {
  let url = window.location.href

  if (url.indexOf('/?code') > -1) {
    const hasQuery = url.match(/\?/g)

    let path = url.match(/#.*$/)
    url = url.replace(/#.*$/, '')
    url = url.replace(/\/\?/, `/${path[0]}${hasQuery.length > 1 ? '&' : '?'}`)

    window.location.href = url
  }
  next()
})

main.js引入该文件

静默授权

• 特征：页面跳的很快，全局前置守卫还没处理完就已经进入了页面，且页面created mounted里的js在执行
• 问题：由于路由还没修整，导致进页面获取不到code 就一直循环跳授权页。
• 加全局前置守卫，电脑端微信/开发者工具打开网页 有效，能在页面加载前重整路由。手机端不行

策略

/src/utils/common.js
export function shuffleUrl(func) {
let url = window\.location.href

      if (url.indexOf('/?code') > -1) {
        const hasQuery = url.match(/\?/g)
        let path = url.match(/#.*$/)
        url = url.replace(/#.*$/, '')
        url = url.replace(/\/\?/, `/${path[0]}${hasQuery.length > 1 ? '&' : '?'}`)
        window.location.href = url
      } else {
        func()
      }
    }

• 使用时

    import {shuffleUrl} from '@/utils/common.js'
    //created钩子里
    shuffleUrl(()=>{
    //路由理顺后要执行的代码
    })