uniapp多套小程序后台如何统一登陆

1. 背景介绍

随着微信小程序的普及,很多公司都开始开发自己的小程序,而对于一些大型企业来说,不仅仅只是开发一款小程序,还有可能同时开发多款小程序。这时候,后台管理系统往往需要给多个小程序进行统一管理,这就会出现一个问题:如何实现多套小程序的统一登陆呢?

2. 解决方案概述

为了解决这个问题,我们需要实现后台管理系统和多个小程序之间的数据交互,可以通过以下几个步骤来实现:

第一步:在后台管理系统中,用户输入账号密码,后台进行验证,成功后生成一个token,然后将token和用户信息存储到数据库中。

第二步:将token和用户信息返回给前端页面,前端通过localStorage等方式将这些信息存储在本地。

第三步:在小程序中实现拦截器,在用户访问受限页面时,先获取本地token,如果存在,则将token通过请求头的形式发送到后端进行验证。如果验证通过,则将请求转发到原本需要访问的页面。

第四步:在小程序中实现自动登录功能,当用户再次访问小程序时,前端会首先尝试从本地localStorage中获取保存的用户信息,如果存在,则自动跳转到首页。

3. 实现步骤详解

3.1 后台管理系统实现

在后台管理系统中进行用户登录验证,并生成token。在node.js后端框架中,可以使用jsonwebtoken库来实现token的生成和验证。


const jwt = require('jsonwebtoken');
// 生成token
const token = jwt.sign({
  username: 'admin',
  password: '123456789'
}, 'secret', { expiresIn: '1h' });

其中,jsonwebtoken库生成token的方法为jwt.sign(),第一个参数是存储在JWT中的信息,第二个参数是secretKey,第三个参数是token的过期时间。

将生成的token和用户信息存储到数据库中,供前端页面进行调用。

3.2 小程序实现

3.2.1 小程序中使用拦截器

小程序中使用拦截器,可以在用户访问受限页面之前进行token的获取和验证,从而保证安全性。使用拦截器需要使用小程序提供的wx.request()方法来进行网络请求。


// 在app.js中实现拦截器
App({
  onLaunch: function () {
    const token = wx.getStorageSync('token');
    // 拦截器实现token验证
    wx.request({
      url: 'https://xxx.com/verifyToken',
      method: 'post',
      header: {
        'content-type': 'application/json', // 默认值
        'token': token
      },
      success: function (res) {
        if (res.data.code === 200) {
          console.log('token验证通过');
        } else {
          console.log('token验证失败');
        }
      }
    })
  }
})

上述代码中,在小程序初始化的时候进行拦截器的实现,使用小程序提供的wx.getStorageSync()方法获取本地存储的token信息,然后将token通过请求头的形式发送到后端进行验证。如果验证通过,则进行后续操作,否则返回错误信息。

3.2.2 自动登录

小程序中可以使用app.js中的onLaunch()方法来实现小程序打开时的自动登录。当用户首次进入小程序时,设置一个标志位,如果用户已经登录,则将标志位置为true,并将用户信息保存到本地localStorage中。


App({
  onLaunch: function () {
    const userInfo = wx.getStorageSync('userInfo');
    if (!userInfo) {
      console.log('用户尚未登录');
    } else {
      this.globalData.userInfo = userInfo;
      this.globalData.isLogin = true;
    }
  },
  globalData: {
    userInfo: null,
    isLogin: false
  }
})

在后续的页面中,可以通过访问app.js中的globalData来判断用户是否登录,并进行自动跳转。


// 在需要登录的页面中,判断用户是否登录,未登录则跳转到登录页面
if (!app.globalData.isLogin) {
  wx.redirectTo({
    url: '/pages/login/login'
  })
}

4. 总结

通过上述的步骤,我们可以实现多套小程序的统一登陆功能,并且保证了数据的安全性。在实际开发中,我们还需要考虑一些其他的情况,比如token过期时间、token的刷新等问题。希望本文能够帮助大家更好地理解小程序的开发和实现。