H5页面在微信浏览器中，进行网页授权

[网页授权流程分为五步：

1. 在公众号平台配置安全域名
2. 引导用户进入授权页面同意授权，获取code
3. 通过code换取网页授权access_token
4. 如果需要，开发者可以刷新网页授权access_token，避免过期
5. 通过网页授权access_token和openid获取用户基本信息

1.在公众号平台配置安全域名

• 在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的「设置与开发」-「功能设置」-「网页授权域名」的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；

2.引导用户进入授权页面同意授权，获取code

• 设置按钮当用户点击按钮时候向后端发送请求，传入当前项目的appId和授权完之后的跳转地址，后端返回我们要跳转的授权页面（微信页面地址如下），跳转链接

  open.weixin.qq.com/connect/oau…

• 在当前页面用户同意授权，会跳转回我们redirect_uri的地址，并且会附带上code参数

​ code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

​ redirect_uri/?code=CODE&state=STATE

请求后端代码：

request.request({
    url: '/xxx/xxxx',//后端接口
    method: 'GET',
    data:{
        appId:'123456',
        redirectUri:'https://xxx.com/pages/index/index',
    },
    success: (result) => {
        if(result.data.code==0){
            location.href = result.data.data;
        }
    }
})

### 

授权页面：

3.通过code换取网页授权access

//此页面为redirect_uri 填写的页面
onLoad((e) => {
    request.request({
        url: '/xxx/xxx', //后端接口
        method: 'POST',
        data:{
            appId:"123456",
            code:e.code,
            state:e.state,
        },
        success: (res) => {
            if (res.statusCode == 200) {
                console.log("获取token",res.data.data);
            }
        }
    });	
})

4.如果需要，开发者可以刷新网页授权access_token，避免过期

• 可在前置路由拦截中进行判断token是否过期，进行token刷新

5.通过网页授权access_token和openid获取用户基本信息

• 后端处理，前端通过接口获取当前用户信息

微信官方文档