portal/src/views/management/Login/components/Login.vue

<template>
    <div class="admin-login__loginForm">
        <el-form :model="loginForm" status-icon :rules="loginRules" ref="LoginForm" label-width="100px">
            <el-form-item label="账号:" prop="username">
                <el-input type="text" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="admin-login-btns">
                    <el-button class="login-btn__login" type="primary" @click="handleLogin('LoginForm')">登录</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { getAdminLogin }                    from '@/api/noToken.js';
    import { getCache, saveCache, getUserAuth } from '@/utils/admin/tools';

    const USER_AUTH = `userAuth`;
    export default {
        name:    'Login',
        data() {
            return {
                loginForm:  {
                    username: '',
                    password: '',
                },
                loginRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                },
            };
        },
        methods: {
            handleLogin(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.doLogin();
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 登录
             * @returns {Promise<void>}
             */
            async doLogin() {
                // 参数获取
                const opt = this.getOption();

                try {
                    const res = await getAdminLogin(opt);
                    if (res.code === 0) {
                        // 缓存 登录状态
                        this.saveCache(USER_AUTH, res.data);
                        // 登录
                        this.goHomePage();
                    }
                } catch (e) {
                    console.error(e);
                }

            },
            getOption() {
                const opt = {
                    userName: this.loginForm.username,
                    password: this.loginForm.password,
                };
                return opt;
            },
            saveCache(key, val) {
                return saveCache(key, val);
            },
            goHomePage() {
                this.$router.push({ name: 'hangyezixun' });
            },
            checkISLoading() {
                const userAuth = getUserAuth();
                if (userAuth && userAuth.userId) {
                    this.goHomePage();
                }
            },
        },
        created() {
            this.checkISLoading();
            // const data = getCache(USER_AUTH);
            // console.log('缓存 =》', data);
        },
    };
</script>

<style lang="scss" scoped>
    $text_color: #CCC;
    .admin-login {
        &__loginForm {
            ::v-deep .el-form-item__label {
                color: $text_color;
            }
        }

        &-btns {
            .login-btn {
                &__login {
                    width: 100%;
                }
            }
        }
    }
</style>