经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
详解vue微信网页授权最终解决方案
来源:jb51  时间:2019/6/17 8:40:48  对本文有异议

vue微信网页授权,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios,开发的微信授权方案。项目地址:vue-wechat-auth

参考了[vue-wechat-login],思路有些不同,本文基于进入所有页面都必须先授权的操作。

与之前写的授权不同之处

这次的逻辑全部在router的beforeEach进行,相较更加简洁明。之前是在一个中间页author.vue中,加上微信授权要跳转很多次

在这里你能找到

微信网页授权前端解决方案,官方文档

如何使用Natapp(ngrok)进行微信本地开发调试,官方文档

如何配置微信开发测试账号

关于测试账号和本地开发设置

由于文章过长这里[微信测试账号和本地开发调试]记得回来哦~

微信网页授权

都设置好了那就开始微信网页开发第一步也是最重要的一步,微信网页授权

关于授权你首先要清楚的是,服务端要用到的是微信openid还是微信unionid,这两者的区别是,如果你要的是unionid,那么你需要在[微信开放平台]去绑定测试账号。测试号的appId和appsecret在微信公众平台的测试号里找。微信公众号后台->开发者工具->公众平台测试帐号->进入

如果你不需要unionid,那这个你就可以省略, 如果服务端是需要unionid的那不绑定的话授权会把报错的。记得问一下服务端开发人员哦。

开发

首先我们看下微信授权的流程图,关于微信网页授权

前端需要做的是

第一步:用户同意授权,获取code,拼接微信授权地址,redirect_uri就是你的当前地址,关于appid有些人是通过接口获取的,我这里就直接写在项目全局变量里了VUE_APP_WECHAT_APPID,用户授权成功后微信会携带code和status跳回来

  1. https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${
  2.  
  3. this.scope}&state=${this.state}#wechat_redirect

第二步,访问登录接口,将code传给服务端,小哥哥进行一系列的操作,通过code换取网页授权access_token拉取用户信息(需scope为 snsapi_userinfo),返回是否登录成功,成功后返回用户信息和登录令牌 token

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

permission.js

  1. import router from './router'
  2. import store from './store'
  3. import getPageTitle from '@/utils/get-page-title'
  4. import wechatAuth from './plugins/wechatAuth' // 微信登录插件
  5. const qs = require('qs')
  6.  
  7. router.beforeEach((to, from, next) => {
  8. const loginStatus = Number(store.getters.loginStatus)
  9. console.log('loginStatus=' + loginStatus)
  10. console.log('token=' + store.getters.token)
  11. // 页面标题
  12. document.title = getPageTitle(to.meta.title)
  13. if (loginStatus === 0) {
  14. // 微信未授权登录跳转到授权登录页面
  15. const url = window.location.href
  16. // 解决重复登录url添加重复的code与state问题
  17. const parseUrl = qs.parse(url.split('?')[1])
  18. let loginUrl
  19. if (parseUrl.code && parseUrl.state) {
  20. delete parseUrl.code
  21. delete parseUrl.state
  22. loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}`
  23. } else {
  24. loginUrl = url
  25. }
  26. // 设置微信授权回调地址
  27. wechatAuth.redirect_uri = loginUrl
  28. // 无论拒绝还是授权都设置成1
  29. store.dispatch('user/setLoginStatus', 1)
  30. // 跳转到微信授权页面
  31. window.location.href = wechatAuth.authUrl
  32. } else if (loginStatus === 1) {
  33. // 用户已授权,获取code
  34. try {
  35. // 通过回调链接设置code status
  36. wechatAuth.returnFromWechat(to.fullPath)
  37. } catch (err) {
  38. // 失败,设置状态未登录,刷新页面
  39. store.dispatch('user/setLoginStatus', 0)
  40. location.reload()
  41. }
  42. // 同意授权 to.fullPath 携带code参数,拒绝授权没有code参数
  43. const code = wechatAuth.code
  44. if (code) {
  45. // 拿到code 访问服务端的登录接口
  46. store
  47. .dispatch('user/loginWechatAuth', code)
  48. .then(res => {
  49. // 成功设置已登录状态
  50. store.dispatch('user/setLoginStatus', 2)
  51. next()
  52. })
  53. .catch(() => {
  54. // 失败,设置状态未登录,刷新页面
  55. store.dispatch('user/setLoginStatus', 0)
  56. location.reload()
  57. })
  58. } else {
  59. store.dispatch('user/setLoginStatus', 0)
  60. location.reload()
  61. }
  62. } else {
  63. // 已登录直接进入
  64. next()
  65. }
  66. })

登录成功后存用户信息,token。访问所有的接口的时候都会在header携带token,如果token失效了,服务端会返回401,做退出操作,删除登录状态,用户信息,token,刷新页面重新进入。

request.js

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

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

store/modules/user.js

  1. import { loginByCode } from '@/api/user'
  2. import {
  3. saveToken,
  4. saveLoginStatus,
  5. saveUserInfo,
  6. removeToken,
  7. removeUserInfo,
  8. removeLoginStatus,
  9. loadLoginStatus,
  10. loadToken,
  11. loadUserInfo
  12. } from '@/utils/cache'
  13. const state = {
  14. loginStatus: loadLoginStatus(), // 登录状态
  15. token: loadToken(), // token
  16. userInfo: loadUserInfo() // 用户登录信息
  17. }
  18.  
  19. const mutations = {
  20. SET_USERINFO: (state, userInfo) => {
  21. state.userInfo = userInfo
  22. },
  23. SET_LOGIN_STATUS: (state, loginStatus) => {
  24. state.loginStatus = loginStatus
  25. },
  26. SET_TOKEN: (state, token) => {
  27. state.token = token
  28. }
  29. }
  30.  
  31. const actions = {
  32. // 登录相关,通过code获取token和用户信息
  33. loginWechatAuth({ commit }, code) {
  34. const data = {
  35. code: code
  36. }
  37. return new Promise((resolve, reject) => {
  38. loginByCode(data)
  39. .then(res => {
  40. // 存用户信息,token
  41. commit('SET_USERINFO', saveUserInfo(res.data.user))
  42. commit('SET_TOKEN', saveToken(res.data.token))
  43. resolve(res)
  44. })
  45. .catch(error => {
  46. reject(error)
  47. })
  48. })
  49. },
  50. // 设置状态
  51. setLoginStatus({ commit }, query) {
  52. if (query === 0 || query === 1) {
  53. // 上线打开注释,本地调试注释掉,保持信息最新
  54. removeToken()
  55. removeUserInfo()
  56. }
  57. // 设置不同的登录状态
  58. commit('SET_LOGIN_STATUS', saveLoginStatus(query))
  59. },
  60. // 登出
  61. fedLogOut() {
  62. // 删除token,用户信息,登陆状态
  63. removeToken()
  64. removeUserInfo()
  65. removeLoginStatus()
  66. }
  67. }
  68.  
  69. export default {
  70. namespaced: true,
  71. state,
  72. mutations,
  73. actions
  74. }

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

  1. VUE_APP_WECHAT_APPID='12345678'复制代码

授权再也难不住我了,如果哪里有问题希望大家给我留言纠正,互相学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号