Vue基于ElementUI的Dialog实现弹窗登录，登录成功前不允许关闭

业务场景

当页面比较单一，只是个单页面的时候。

优点

简单粗暴

1.使用了session来记录登录是否成功，成功后不需要再登录；
2.使用最简单的方式，可以写死用户，不需要有后台服务，当然也可以修改代码从后台校验用户登录；
3.使用回调函数来强制用户不能点击空白处也不能关闭该登录窗口。

缺点

这里只是简单实现，不适合复杂业务场景

代码

新建一个vue组件，代码如下，把这个组件引入到你的页面，就会自动弹出登录窗口

<template>
    <el-dialog width="30%" title="登录" :visible.sync="modelShow" 
    		   :show-close="false"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :before-close="closeCallback()"
    >
        <el-form ref="form" :model="form" size="small" label-width="100px">
            <el-row>
                <el-form-item label="用户名：" >
                    <el-input class="search-input" v-model="form.id"/>
                el-form-item>
                <el-form-item label="密码：">
                    <el-input type="password" class="search-input" v-model="form.pw"/>
                el-form-item>
            el-row>
        el-form>
        <div slot="footer" class="dialog-footer">

            <el-button type="primary" @click="login('form')">确 定el-button>
        div>
    el-dialog>
template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                //是否显示本面板
                modelShow: false,
                //是否可以关闭
                canClose: false,
                //表单数据
                form: {
                    id: '',
                    pw: '',
                },
            }
        },
        mounted: function () {
            const that = this;
            //如果用户没有登录，则打开登录界面
            if (window.sessionStorage) {
                const data = JSON.parse(sessionStorage.getItem("is_login"));
                if (data) {
                    that.modelShow = false;
                } else {
                    that.modelShow = true;
                }
            }
        },
        methods: {
            //登录
            login: function () {
                //这里使用的是固定的用户名和密码。admin/111111

                //校验密码
                if (this.form.pw !== '111111') {
                    this.$message({
                        type: "danger",
                        message: "用户名或密码错误!"
                    });
                    return;
                }
                //校验用户
                if (this.form.id === 'admin') {
                    this.modelShow = false;
                    //把登录数据写入到session
                    if (window.sessionStorage) {
                        sessionStorage.setItem("is_login", "true");
                    }
                } else {
                    this.$message({
                        type: "danger",
                        message: "用户名或密码错误!"
                    });
                }
            },
            //关闭登录窗口前的回调(如果用户没有登录成功，则再次打开本窗口，以达到强制登录的目的)
            closeCallback: function () {
                if (window.sessionStorage) {
                    const data = JSON.parse(sessionStorage.getItem("is_login"));
                    if (data) {
                        this.modelShow = false;
                    } else {
                        this.modelShow = true;
                    }
                }
            }
        },
    }
script>

<style scoped>

style>

---

（全文完）

欢迎光临：松果前端开发导航