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()

总结

以上所述是小编给大家介绍的vue项目中添加锁屏功能实现思路，希望对大家有所帮助