uniapp 小程序实现微信授权登录（前端和后端）_微信小程序授权登录后端如何实现

      this.$store.commit("SET\_USER\_INFO", data);
      this.$api.msg("登陆成功");
    }
  }
},

### 2.后端：需要通过调用微信提供的第三方接口来实现


#### 1.主要流程：在前端调用接口成功的将临时code 传递给后端时 ，后端通过调用微信的第三方接口拿到 openid, session\_key 这两个参数，查询数据库是否有 openid 如果有则更新 session\_key ，如果没有则在数据库中新建一条用户信息的数据


#### 2.后端代码（node.js）

/**
@description 微信登录
* @param {String} code
* @type {POST}
* @return
*/
router.post(‘/wxLogin’, async (req, res, next) => {
try {
const { code, avatarUrl, userName } = req.body
let token = Token.tokenSet()
// 当前微信开发者的appId
const appId = ‘wx66dee29d470c6095’
const appSecret = ‘79ee1240fa1ee8f67066d67fa7692e21’;
// 微信登录的第三方接口
const url = https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js\_code=${code}&grant\_type=authorization\_code
//调用微信登录第三方接口
const { data: { openid, session_key } } = await axios({ url, method: ‘get’ })
//更新当前用户的信息
const updateInfo = await db.findOneAndUpdate({ openId: openid }, { $set: { sessionKey: session_key, token,avatarUrl,userName } })
if (updateInfo) {
const userInfo = await db.findOne({openId: openid})
return res.jsonp({ code: 1, message: ‘登录成功’, data: userInfo})
} else {
//如果当前用户没有登录则插入一条新的用户信息
const insertInfo = { openId: openid, sessionKey: session_key, userType: 2, status: 1, token, userName,avatarUrl }
const userInfo = await db.findOne({openId: openid})
await db.insertMany(insertInfo)
return res.jsonp({ code: 1, message: ‘登录成功’, data: userInfo})
}

} catch {
next({ message: ‘接口错误’ })
}
})

### 完整的代码逻辑可参考


#### 前端：<https://gitee.com/ZHANG_6666/uni-app/blob/master/pages/myCenter/myCenter.vue>


#### 后端：[https://gitee.com/ZHANG\_6666/express–vue3–ant-design2/blob/master/routes/users.js]( )


![在这里插入图片描述](https://img-blog.csdnimg.cn/aa54fd90904345208a0fa0a58c70d839.png)


### 前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。



以 Vue 为例，我整理了如下的面试题。

![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**