利用用户信息缓存实现前端页面拦截（以微信小程序为例）及页面重定向

一、用户信息注入缓存

使用全局变量来保存用户信息一个很大的缺点就是当杀死进程后，原来的登陆信息也会一起被清空，所以使用本地缓存来存储用户信息。setGlobalUserInfo为注入缓存，setStorageSync为同步注入方式，getGlobalUserInfo为读取缓存，getStorageSync为同步读取方式

//app.js
App({
 serverUrl:"http://127.0.0.1:8081",
 userInfo:null,

 setGlobalUserInfo:function(user) {              
   wx.setStorageSync('userInfo', user);
 },

 getGlobalUserInfo:function(){
   return wx.getStorageSync('userInfo');
 }
})

二、用户注销

众所周知，我们清理缓存就可以了。removeStorageSync为清理缓存。

logout: function () {
    // var user = app.userInfo;
    var user = app.getGlobalUserInfo();

    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '请等待...',
    });
    // 调用后端
    wx.request({
      url: serverUrl + '/logout?userId=' + user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          // 登录成功跳转 
          wx.showToast({
            title: '注销成功',
            icon: 'success',
            duration: 2000
          });
          // app.userInfo = null;
          // 注销以后，清空缓存
          wx.removeStorageSync("userInfo")
          // 页面跳转
          wx.redirectTo({
            url: '../userLogin/login',
          })
        }
      }
    })
  }

三、页面拦截

在一些场景下，游客可以浏览某个页面的信息，但是如果要点击一些页面，就需要访问用户信息，这时会拦截用户请求，如点击“我的”。getGlobalUserInfo为读取此时本地的用户信息缓存。

showMine: function () {
    var user = app.getGlobalUserInfo();

    if (user == null || user == undefined || user == '') {
      wx.navigateTo({
        url: '../userLogin/login',
      })
    } else {
      wx.navigateTo({
        url: '../mine/mine',   //跳转到“我的”界面
      })
    }
  }

四、页面重定向（以在“首页”点击“上传文件”为例）

用户在首页点击“上传文件”时被拦截跳转到登陆界面，然后登陆保存用户信息后，其实应该重定向到此前被拦截的那个页面，也就是“上传文件”页面，而不是“我的”页面，所以需要页面重定向。

• index.js — upload()

注意 var realUrl = '../videoinfo/videoinfo？videoInfo=' + videoInfo;和 url: '../userLogin/login?redirectUrl='+ realUrl;属于子与父拼接，在传到下一个页面时子的?和=会被过滤掉，所以我们把子的这两个字符用其他字符来替代，传到下一个页面（登陆页面）时再进行替换。此时被拦截的“上传文件”页面Url保持到realUrl

upload: function () {
    var me = this;
    var user = app.getGlobalUserInfo();

    var videoInfo = JSON.stringify(me.data.videoInfo);
    var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;

    if (user == null || user == undefined || user == '') {
      wx.navigateTo({
        url: '../userLogin/login?redirectUrl='+ realUrl,
      })
    } else {
     videoUtil.uploadVideo();
    }
    
  }

• login.js — onload()

取出重定向的UrlredirectUrl,进行替换

 onLoad:function(params){
   var me = this;
   var redirectUrl = params.redirectUrl;
   
   redirectUrl=redirectUrl.replace(/#/g,"?");
   redirectUrl=redirectUrl.replace(/@/g,"=");

   me. redirectUrl = redirectUrl;
  }

• login.js — onload()的success()

登陆成功后，对redirectUrl进行判断，如果为null，就跳转到首页，有值就跳转到redirectUrl实现重定向

 success: function (res) {
          wx.hideLoading();
          if (res.data.status == 200) {
            // 登录成功跳转 
            wx.navigateTo({
              url: '../mine/mine',
            })
            wx.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 3000
            });
           app.setGlobalUserInfo();
           
            //页面跳转
            var redirectUrl = me.redirectUrl;
            if(redirectUrl != null && redirectUrl != undefined && redirectUrl != ''){
              wx.redirectTo({
                url: redirectUrl,
              })
            }else{
              wx.redirectTo({
                url: '../mine/mine',
              })
            }
         
          } else if (res.data.status == 500){
            wx.showToast({
              title: '用户名或密码错误',
              icon: 'none',
              duration: 3000
         
            })
          }
        }