mpvue 项目初始化及实现授权登录的实现方法

简介

mpvue 是基于 Vue.js 的小程序开发框架，使我们可以使用 Vue.js 的语法来开发小程序，同时支持快速构建项目以及各种插件。授权登录是小程序中必不可少的一部分，本文将讲解如何使用 mpvue 实现授权登录。

前置条件

了解 Vue.js 和小程序，了解基本的前端开发知识
安装并配置好小程序开发环境、Node.js 和 npm

项目初始化

安装 mpvue-cli

使用以下命令安装 mpvue-cli：

npm install -g vue-cli
npm install -g mpvue-cli

创建项目

使用以下命令创建项目：

vue init mpvue/mpvue-quickstart <project-name>

该命令使用 mpvue-quickstart 模板创建一个新的项目，并安装相关依赖。

目录结构

创建完成后，项目目录结构如下:

project
├── build                                   # webpack 配置文件
├── node_modules                            # 依赖包
├── src                                        # 项目源码
│   ├── assets                              # 资源
│   ├── components                             # 组件
│   ├── pages                                # 页面
│   ├── store                                # 状态管理
│   ├── App.vue                              # 页面入口文件
│   ├── main.js                               # 程序入口文件，加载各种公共组件
├── static                                      # 项目静态资源
├── .babelrc                                  # babel 配置文件
├── .editorconfig                      # 编辑器配置文件
├── .eslintignore                     # ESLint忽略文件配置
├── .eslintrc.js                           # ESLint配置
├── index.html                               # 入口html文件
├── package.json                          # 项目配置文件
├── README.md                           # 项目说明文件

代码实现

微信登录

首先需要在小程序管理后台中开通微信登录功能，并获取对应的 appid 和 appsecret。

在 src 目录下新建 components 和 pages 文件夹，分别用来存放组件和页面。

在 pages 目录下新建一个名为 login 的页面，将以下代码输入到 login.vue 中：

<template>
  <div class="login">
    <button @click="login">微信登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      uni.login({
        success({ code }) {
          // 这里调用后台服务端的登录接口，获取openid 和 sessionKey 
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

其中使用了 uni.login 接口来获取用户的登录凭证 code，然后将 code 发送到后台服务端进行登录操作。

后台服务端

编写后台服务端的登录接口，用 code 来获取用户的 openid 和 session_key 信息：

示例代码：

const request = require('request');
const { appId, appSecret } = wxConfig;

app.post('/login', async (req, res) => {
  const { code } = req.body;

  if (code) {
    request({
      url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`,
      method: 'GET',
      json: true
    }, async (error, response, body) => {
      const { openid, session_key } = body;
      // 处理业务逻辑，如用户的登录、注册等
    });
  } else {
    res.json({
      code: -1,
      message: '缺少参数code'
    });
  }
});

获取用户信息

接下来就是从服务端获取用户信息，采用 uni.getUserInfo 接口进行处理，代码如下：

<template>
  <div class="login" v-if="!isLogin">
    <button @click="login">微信登录</button>
  </div>
  <div class="user" v-else>
    <img :src="avatarUrl" />
    <div>{{ nickname }}</div>
    <button @click="logout">退出登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      nickname: '',
      avatarUrl: ''
    }
  },
  methods: {
    login() {
      uni.login({
        success({ code }) {
          uni.getUserInfo({
            withCredentials: true,
            success: (info) => this.getUserInfo(info),
            fail: (e) => {}
          })
        }
      })
    },
    getUserInfo(info) {
      const { encryptedData, iv } = info;
      // 将 encryptedData 和 iv 发送到后台服务端，获取用户信息
    },
    logout() {
      this.isLogin = false;
    }
  }
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

其中，isLogin 用来判断用户是否已经登录成功，如果登录成功，则将 isLogin 设为 true。getUserInfo 方法用来向后台服务端获取用户信息，从后台服务端获取信息后，将 nickname 和 avatarUrl 设为获取到的值即可。