vue+element实现输入密码锁屏

本文实例为大家分享了vue+element实现输入密码锁屏的具体代码，供大家参考，具体内容如下

1.页面中个的点击事件

通过vuex来存在状态

/**
  * 锁屏功能
  */
            lock() {
                console.log('锁屏')
                const that = this
                this.$prompt('请输入锁屏密码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,        //判断不为空正则
                    inputErrorMessage: '锁屏密码不能为空'
                }).then(({
                    value
                }) => {
                    that.isLock = !that.isLock
                    that.$store.commit('SET_LOCK_PASSWD', value)
                    that.elementTips("success", "锁屏成功");
                    this.handleLock()
                }).catch(() => {
                    that.elementTips("info", "锁屏失败");
                });
            },
            //判断输入框是否有内容，有内容就跳转，设置状态
            handleLock() {
                const that = this
                if (util.validatenull(this.lockPasswd)) {
                    this.box = true
                    return
                }
                that.$store.commit('SET_LOCK')
                setTimeout(() => {
                    that.go('/lock')
          }, 100)
 },

2.在vuex中设置状态

import util from '@/utils'
import store from '../'
import cookie from '@/utils/cookie.js'
const mutations = {
    SET_IM(state, userInfo) {
        console.log('user:', userInfo)
        state.userInfo = userInfo
    },
    SET_LOCK(state, action) {
        state.isLock = true
        util.setStore('isLock', state.isLock)

        // console.log('util.setStore',util.getStore('isLock'))
    },
    SET_LOCK_PASSWD(state, lockPasswd) {
        state.lockPasswd = lockPasswd
        util.setStore('lockPasswd', state.lockPasswd)

        // console.log('util.setStore',util.getStore('lockPasswd'))
    },
    CLEAR_LOCK(state, action) {
        state.isLock = false
        state.lockPasswd = ''
        util.removeStore('lockPasswd')
        util.removeStore('isLock')
        // console.log('state.isLock',state.isLock)
    },
    }
export default mutations


/**
 * 
 * @author getters 
 */
const getters = {
  isLock: state => state.isLock,
  lockPasswd: state => state.lockPasswd,
}
export default getters


/**
 * @desc 状态表
 * @author Vman 
 * @time 2019/9/6
 */
import {
    getStore
} from '@/utils'
export default {
    userInfo: {},
    //im 实例
    nim: null,
    name: '',
    isLock: false,
    lockPasswd: '',
     userUID: '',
    sdktoken: '',
}

3.解锁页面

4.在路由中利用路由钩子函数

import Vue from 'vue'
import Router from 'vue-router'
import util from '@/utils'
import store from '@/store'

router.beforeEach((to, form, next) => {
    let user_token = util.getStore('user_token');
    let toPath = to.path
    console.log('toPath:', toPath)
    console.log('在白名单中:', whiteList.indexOf(toPath));
    console.log('user_token:', user_token)
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    if (whiteList.indexOf(toPath) == -1 && (!user_token && user_token !== undefined && user_token != null)) {
        //不在白名单，并且user_token没有
        router.push({
            path: '/login'
        })
    } else if (whiteList.indexOf(toPath) != -1) {
        //去登录页
        // util.removeStore('user_token')
        next();
    } else if (whiteList.indexOf(toPath) == -1 && user_token) {
        //不在白名单，并且user_token存在
        next()
    }

    /**
     * 判断锁屏
     */
    if (store.getters.isLock && to.path !== '/lock') {
        next({
            path: '/lock'
        })
    }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。