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.解锁页面

<template>
    <div class="lock-container pull-height">
        <div class="lock-form animated bounceInDown">
            <div class="animated" :class="{'shake':passwdError,'bounceOut':pass}">
                <h3 class="text-white">{{name}}</h3>
                <el-input placeholder="请输入登录密码" type="password" class="input-with-select animated" v-model="passwd"
                 @keyup.enter.native="handleLogin">
                    <!-- <el-button slot="append" @click="handleLogin" style="padding-right:36px;"><svg-icon  class-name='international-icon' icon-class="deblocking"/></el-button> -->
                    <!-- <el-button slot="append" @click="handleLogout"><svg-icon class-name='international-icon' icon-class="lockOut"/></el-button> -->
                    <el-button slot="append" @click="handleLogin" style="padding-right:36px;"><i class="el-icon-unlock"></i></el-button>
                    <el-button slot="append" @click="handleLogout"><i class="el-icon-switch-button"></i></el-button>
                </el-input>
            </div>
        </div>
    </div>
</template>
<script>
    import util from '@/utils'
    import {
        mapGetters,
        mapState
    } from 'vuex'
    export default {
        name: 'lock',
        data() {
            return {
                passwd: '',
                passwdError: false,
                pass: false
            }
        },
        created() {},
        mounted() {},
        computed: {
            ...mapState({
                name: state => state.name
            }),
            ...mapGetters(['tag', 'lockPasswd'])
        },
        props: [],
        methods: {
            handleLogout() {
                this.$confirm('是否退出系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //删除vuex状态表
                    this.$store.commit('CLEAR_LOCK')
                    //删除user_token
                    util.removeStore('user_token')
                    this.$router.push({
                        path: '/login'
                    })
                    console.log('555')
                }).catch(() => {
                    return false
                })
            },
            handleLogin() {
                console.log('this.lockPasswd', this.lockPasswd)
                if (this.passwd !== this.lockPasswd) {
                    this.passwd = ''
                    this.$message({
                        message: '解锁密码错误,请重新输入',
                        type: 'error'
                    })
                    this.passwdError = true
                    setTimeout(() => {
                        this.passwdError = false
                    }, 1000)
                    return
                }
                this.pass = true
                setTimeout(() => {
                    //输入密码正确后删除vuex中状态值
                    this.$store.commit('CLEAR_LOCK')
                    this.$router.go(-1); //返回上一层
                }, 1000)
            }
        },
        components: {}
    }
</script>

<style lang="scss">
    .lock-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .lock-container::before {
        z-index: -999;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../../assets/images/lockLogin.png");
        background-size: cover;
    }

    .lock-form {
        width: 300px;
    }
</style>

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'
        })
    }
});

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