vue axios封装获取微信公众号用户的openid

巜巜

已于 2022-02-25 14:56:20 修改

阅读量2.1k

点赞数

分类专栏： vue实战入门与提高文章标签： javascript 前端 vue.js

于 2022-02-25 14:21:13 首次发布

本文链接：https://blog.csdn.net/weixin_49739911/article/details/123131387

版权

vue实战入门与提高专栏收录该内容

6 篇文章 0 订阅

订阅专栏

axios封装

一般会在项目的src目录中，新建一个文件夹，作为网络请求模块，用来封装axios，

创建axios实例：

axios.create([config])  //可以使用自定义配置新建一个axios实例
//  配置
const service = axios.create({ 
baseURL: process.env.VUE_APP_BASE_API, //   api 的 base_url
requests timeout: 1000*12 // 请求超时时间
})
//  添加请求拦截器
service.interceptors.request.use(
//  在发送请求之前
    config => {
        // do something before request is sent
        return config
    },
//  在请求错误之后
    error => {
        // do something with request error
        return Promise.reject(error)
    }
)
//  添加响应拦截器
service.interceptors.response.use(
//  对响应数据返回以一个字符串表示的Number对象值，查看返回的状态码是否为2开头，为true可以正常拿到数据。
    response => {
        // response status == 2xx, success
        if (response.status.toString().startsWith('2')) {
            const res = response.data
            return res
        }
    },
//  返回响应的错误信息
    error => {
        return Promise.reject(error)
    }
)

openid

如何获取微信公众号用户的openid：

openid：用户唯一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的openID。
关于网页授权的两种scope的区别：

以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的，用户感知的就是直接进入了回调页（往往是业务页面）；
以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的，但这种授权需要用户手动同意，并且由于用户同意过，所以无需关注，就可以在授权后获取该用户的基本信息；
用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户openID来获取用户基本信息，这个接口，包括其他微信接口，都是需要该用户（即openID）关注了公众号后，才能调用成功的；

第一步：用户同意授权，获取code；
第二步：通过code换取网页授权access_token，公众号可通过下述接口来获取网页授权access_token，如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openID，snsapi_base式的网页授权流程到此为止；
第三步：刷新access_token（如果需要），由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。
第四步：拉取用户信息（需scope为snsapi_userinfo），如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openID拉取用户信息了；
第五步：检验授权凭证（access_token）是否有效。
1. 通过微信接口，获取网页授权code
2. 通过授权code获取用户信息（用户信息包含两种：1、）只取openid，2、）取用户相关头像，昵称，openid等）

vue

vue框架使用注意事项和经验：

父子组件：父组件通过prop向子组件传递数据，子组件绑定自定义事件，通过this.$emit（event，params）来调用自定义事件，使用vue提供的$parent /$children & $refs 方法来通信；
vuex几种属性和作用，以及使用vuex的基本模式：

vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；
state的改变完全由mutations控制，我们没有必要任何项目都使用vuex，对于中大型复杂项目而言，需要共享的状态很多时，使用vuex才是最佳选择；
state单一状态树，用一个对象就包含了全部的应用层级状态，并且作为一个唯一数据源而存在getters就像计算属性一样，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算；
Action提交的是mutation，而不是直接变更状态，可以包含任意异步操作；
module将store分割成模块（module），每个模块拥有自己的state，mutation，action，getter，甚至是嵌套子模块；
store目录是用来组织vuex代码用的，将action，mutation，state分文件管理，这个项目大了之后也很容易管理和查询。