uni-app持久化登录简单实现

       想要实现持久化登录，原理就是在每次进入应用的时候获取上一次用户登录的信息。

       那么就好办了，我们在每次登录成功后把用户的账号密码存储到本地，然后在进入应用的时候读取本地文件获取账号密码重新执行登录流程，在退出登录的时候删除存储的用户登录本地文件。

先写个uniapp中存，读，删方法的文件

filePersistentIO.js

// 数据持久化存储
let addr = "RMUser/Info/"; // 手机存储的文件位置

export default {
  storage(className, data) {
    plus.io.requestFileSystem(
      // plus.io.PRIVATE_DOC, // 程序私有文档目录常量
      // plus.io.PUBLIC_DOWNLOADS, // 程序私有文档目录常量
      plus.io.PUBLIC_DOCUMENTS,
      (fs) => {
        // 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象
        fs.root.getFile(
          addr + className,
          { create: true }, // 文件不存在则创建
          (fileEntry) => {
            // 文件在手机中的路径
            fileEntry.createWriter((writer) => {
              // 写入文件成功完成的回调函数
              writer.onwrite = (e) => {
                //console.log('写入成功');
              };
              // 向文件中写入数据
              writer.write(JSON.stringify(data));
              // 写入完成回调
              writer.onwriteend = function (res) {
                console.log("写入文件成功", res.target.fileName);
              };
              // 写入错误回调
              writer.onerror = function (err) {
                console.error("写入文件失败", err);
              };
            });
          },
          (e) => {
            console.log("getFile failed: ", e);
          }
        );
      },
      (e) => {
        console.log(e.message);
      }
    );
  },
  read(className) {
    let that = this;
    return new Promise((resolve, reject) => {
      plus.io.requestFileSystem(
        // plus.io.PRIVATE_DOC,
        // plus.io.PUBLIC_DOWNLOADS,
        plus.io.PUBLIC_DOCUMENTS,

        (fs) => {
          fs.root.getFile(
            addr + className,
            { create: false },
            (fileEntry) => {
              fileEntry.file(function (file) {
                // console.log("文件大小:" + file.size + "-- 文件名:" + file.name);
                //创建读取文件对象
                let fileReader = new plus.io.FileReader();
                //以文本格式读取文件数据内容
                fileReader.readAsText(file, "utf-8");
                //文件读取操作完成时的回调函数
                fileReader.onloadend = (evt) => {
                  // console.log(evt.target.result);
                  // console.log("evt.target.result");

                  resolve(JSON.parse(evt.target.result));
                  // sURL = JSON.parse(evt.target.result).URL;
                };

                // fileReader.onloadend = function(evt) {
                //     resolve(evt.target.result)
                // };
              });
            },
            (e) => {
              reject(e);
            }
          );
        },
        (e) => {
          reject(e);
          console.log(e.message);
        }
      );
    });
  },
  deletes() {
    plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, (fs) => {
      let a = fs.root.toURL();
      //删除目录不能指向文件名  只能指向文件夹
      console.log(a + "/" + addr);
      plus.io.resolveLocalFileSystemURL(a + "/" + addr, (entry) => {
        //读取这个目录对象
        var directoryReader = entry.createReader();
        //读取这个目录下的所有文件
        directoryReader.readEntries((entries) => {
          // console.log(entries.length);
          //如果有才操作
          console.log(entries, "entries");
          if (entries.length > 0) {
            //删除目录将会删除其下的所有文件及子目录 不能删除根目录，如果操作删除根目录
            //将会删除目录下的文件及子目录，不会删除根目录自身。 删除目录成功通过succesCB
            //回调返回，失败则通过errorCB返回。
            entry.removeRecursively(
              (entry) => {
                console.log("删除成功回调");
                //删除成功回调
                this.resultdata = [];
              },
              (e) => {
                //错误信息
                console.log(e.message + " ?!");
              }
            );
          }
        });
      });
    });
  },
};

在main.js文件中挂载到全局

import filePersistentIO from "./plugins/filePersistentIO";

Vue.prototype.$filePersistentIO = filePersistentIO; // 文件缓存

改造之前的登录方法

// 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/work/index");
      });
      // 登录成功后将用户名密码存储到文件
      try {
        this.$filePersistentIO.storage("RM_USR_INFO.txt", this.loginForm);
      } catch (error) {
        // 浏览器会失效
      }
    },

在每次登录成功存储账号密码到本地

  created() {
    // this.getCode()
    try {
      this.getLoginInfoFromFile();
    } catch (error) {
      // 浏览器会失效
    }
  },


getLoginInfoFromFile() {
      /** 持久化存储数据读取 （用户名及token自动登录）*/
      let loginInfoFromFile = null;
      this.$filePersistentIO.read("RM_USR_INFO.txt").then((res) => {
        loginInfoFromFile = res;
        if (loginInfoFromFile) {
          // 缓存中存在登录用户则自动执行登录流程
          this.$store.dispatch("Login", loginInfoFromFile).then(() => {
            // 设置用户信息
            this.$store.dispatch("GetInfo").then((res) => {
              this.$tab.reLaunch("/pages/work/index");
            });
          });
        }
      });
    },

在页面初始化的时候调用读取文件方法获取账号密码，执行登录的流程。

改装退出登录方法

import filePersistentIO from "@/plugins/filePersistentIO";

// 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token)
          .then(() => {
            commit("SET_TOKEN", "");
            commit("SET_ROLES", []);
            commit("SET_PERMISSIONS", []);
            removeToken();
            storage.clean();

            // 尝试删除文件，捕获异常
            try {
              filePersistentIO.deletes();
            } catch (error) {
              // 浏览器会失效
            }

            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

退出登录的时候删除登录信息文件

搞定~