Vue项目中添加锁屏功能

Ryan_Li 发布于2019-08-02 10:48 / 1556人阅读

摘要：老司机快上车，来不及解释了。作者相关文章基于实现后台系统权限控制前端文档汇总增删改查附编辑添加弹框组件共用打赏衷心的表示感谢

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(弹框)组件共用

打赏衷心的表示感谢

云服务器 GPU云服务器锁屏功能云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52573.html

Vue项目中添加锁屏功能

摘要：老司机快上车，来不及解释了。作者相关文章基于实现后台系统权限控制前端文档汇总增删改查附编辑添加弹框组件共用打赏衷心的表示感谢 0. 直接上预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage （本项目已经封装h5的sessionStorage和localStorage） ( 3 ) vuex设置 SE...

SimpleTriangle 2019-08-22 18:22 评论0 收藏0
Vue项目中添加锁屏功能

摘要：老司机快上车，来不及解释了。作者相关文章基于实现后台系统权限控制前端文档汇总增删改查附编辑添加弹框组件共用打赏衷心的表示感谢 0. 直接上预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage （本项目已经封装h5的sessionStorage和localStorage） ( 3 ) vuex设置 SE...

SQC 2019-08-30 15:53 评论0 收藏0
iView 发布后台管理系统 iview-admin，没错，它就是你想要的

摘要：简介是基于，搭配使用组件库形成的一套后台集成解决方案，由前端可视化团队部分成员开发维护。遵守设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 简介 iView Admin 是基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解...

HackerShell 2019-08-21 17:06 评论0 收藏0
封装框架的实践

摘要：最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于和封装的框架，集成数据存储字体图标库拓展语言网络请求等模块，为了让业务开发更专注于数据驱动。最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于vue和elementUI封装的框架，集成数据存储localforage、字体图标库font-awesome、css拓展语言scss、网络请求axios等模块，为了让业...

Dogee 2019-08-23 13:57 评论0 收藏0