Vue 项目中添加锁屏功能

本贴最后更新于 2100 天前,其中的信息可能已经时过境迁

0. 直接上 预览链接

Vue 项目中添加锁屏功能

1. 实现思路

  • ( 1 ) 设置锁屏密码
  • ( 2 ) 密码存 localStorage (本项目已经封装 h5 的 sessionStorage 和 localStorage)
  • ( 3 ) vuex 设置 SET_LOCK state.isLock = true (为 true 是锁屏状态)
  • ( 4 ) 在路由里面判断 vuex 里面的 isLock(为 true 锁屏状态不能让用户后退 url 和自行修改 url 跳转页面否则可以)

(1)设置锁屏密码

  handleSetLock() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$store.commit('SET_LOCK_PASSWD', this.form.passwd)
          this.handleLock()
        }
      })
    },

( 2 ) 密码存 localStorage setStore 是自己封装的方法

  SET_LOCK_PASSWD: (state, lockPasswd) => {
      state.lockPasswd = lockPasswd
      setStore({
        name: 'lockPasswd',
        content: state.lockPasswd,
        type: 'session'
      })
    },

( 3 ) vuex 设置 SET_LOCK state.isLock = true 同时存在 store 里面

  SET_LOCK: (state, action) => {
      state.isLock = true
      setStore({
        name: 'isLock',
        content: state.isLock,
        type: 'session'
      })
    },

( 4 ) 在路由里面判断 vuex 里面的 isLock

 if (store.getters.isLock && to.path !== lockPage) {
      next({
        path: lockPage
      })
      NProgress.done()

源码地址

前端学习交流群 493671066,美女多多。老司机快上车,来不及解释了。

作者相关 Vue 文章

基于 Vue2.0 实现后台系统权限控制

前端文档汇总

VUE2.0 增删改查附编辑添加 model(弹框)组件共用

打赏 衷心的表示感谢

打赏

  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 193 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...