详解vue微信网页授权最终解决方案

https://open.weixin.qq.com/connect/oauth2/authorize"external nofollow" target="_blank" href="https://mp.weixin.qq.com/wiki">code换取网页授权access_token，拉取用户信息(需scope为 snsapi_userinfo)，返回是否登录成功，成功后返回用户信息和登录令牌 token 



在permission.js中路由拦截进行这一系列操作，代码注释很详细了
permission.js


import router from './router'
import store from './store'
import getPageTitle from '@/utils/get-page-title'
import wechatAuth from './plugins/wechatAuth' // 微信登录插件
const qs = require('qs')

router.beforeEach((to, from, next) => {
 const loginStatus = Number(store.getters.loginStatus)
 console.log('loginStatus=' + loginStatus)
 console.log('token=' + store.getters.token)
 // 页面标题
 document.title = getPageTitle(to.meta.title)
 if (loginStatus === 0) {
 // 微信未授权登录跳转到授权登录页面
 const url = window.location.href
 // 解决重复登录url添加重复的code与state问题
 const parseUrl = qs.parse(url.split('"htmlcode">

 // 登录超时,重新登录 
 if (res.status === 401) { 
 store.dispatch('user/fedLogOut').then(() => { 
 location.reload() 
 }) 
} 


用户登录后将token和用户信息存入storage中，登录状态设置到cookie里，store user中主要是进行用户信息存贮获取删除的操作
store/modules/user.js


import { loginByCode } from '@/api/user'
import {
 saveToken,
 saveLoginStatus,
 saveUserInfo,
 removeToken,
 removeUserInfo,
 removeLoginStatus,
 loadLoginStatus,
 loadToken,
 loadUserInfo
} from '@/utils/cache'
const state = {
 loginStatus: loadLoginStatus(), // 登录状态
 token: loadToken(), // token
 userInfo: loadUserInfo() // 用户登录信息
}

const mutations = {
 SET_USERINFO: (state, userInfo) => {
 state.userInfo = userInfo
 },
 SET_LOGIN_STATUS: (state, loginStatus) => {
 state.loginStatus = loginStatus
 },
 SET_TOKEN: (state, token) => {
 state.token = token
 }
}

const actions = {
 // 登录相关，通过code获取token和用户信息
 loginWechatAuth({ commit }, code) {
 const data = {
 code: code
 }
 return new Promise((resolve, reject) => {
 loginByCode(data)
 .then(res => {
  // 存用户信息，token
  commit('SET_USERINFO', saveUserInfo(res.data.user))
  commit('SET_TOKEN', saveToken(res.data.token))
  resolve(res)
 })
 .catch(error => {
  reject(error)
 })
 })
 },
 // 设置状态
 setLoginStatus({ commit }, query) {
 if (query === 0 || query === 1) {
 // 上线打开注释，本地调试注释掉，保持信息最新
 removeToken()
 removeUserInfo()
 }
 // 设置不同的登录状态
 commit('SET_LOGIN_STATUS', saveLoginStatus(query))
 },
 // 登出
 fedLogOut() {
 // 删除token，用户信息，登陆状态
 removeToken()
 removeUserInfo()
 removeLoginStatus()
 }
}

export default {
 namespaced: true,
 state,
 mutations,
 actions
}



在根目录下.env开头的三个文件中设置微信appID


VUE_APP_WECHAT_APPID='12345678'复制代码


授权再也难不住我了，如果哪里有问题希望大家给我留言纠正，互相学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。