vue3 rules验证

实现步骤与思路：
一、登录功能：
（1）在components文件夹下创建一个Login.vue的组件，在路由文件（index.js）中导入登录页组件：import Home from '../components/Home.vue'，并且给根组件（App.vue）添加一个路由占位符<router-view></router-view>，在路由文件中添加路由规则{ path: '/login', component: Login }。
（2）编写结构和样式以及行为：
思路：用户输入登录用户名和密码，如果用户输入的都符合规范则调用后台接口，如果后台返回的数据中的status为200则表示后台中有这个用户，也就代表登录成功，登录成功与否都会有消息提示，若登录成功则会跳转到主页中。

 

<!-- 登录 -->
<template>
     <div class="login_home">
        <!-- <Head/> -->
        <div class="login_bg">
            <div class='login'>
                <div class="password">
                    <div class="title">
                        <h2 class="hd">无组织排放管理监控平台</h2>
                    </div>
                    <!-- 登录表单区域 -->
                    <el-form :model='loginForm' :rules='loginFormrules' ref="loginFormRef" label-width="80px" class="passnum">
                        <el-form-item prop="name">
                            <keep-alive>
                                <el-input v-model="loginForm.name" prefix-icon="iconfont icon-user" placeholder="请输入账号/手机号" clearable></el-input>
                            </keep-alive>
                        </el-form-item>
                         <el-form-item prop="pwd">
                          <el-input type="password" v-model="loginForm.pwd" prefix-icon="iconfont icon-password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="loginFormbtn">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
     </div>
</template>
<script>
import Head from '../../src/components/Head/Head.vue'
export default ({
   name:'Login',
   components:{ Head },
   data(){
        return{
            loginForm: {
                app_sid:'',
                name: '',
                pwd: ''
            },
            // 这是表单规则验证对象
            loginFormrules: {
                name: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                pwd: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
   },
    created(){ 
        this.initConfig()
    },
    mounted(){ },
    methods:{
        // 设置uid
        initConfig(){
            this.$http.get('/main/config').then(res=>{               
                window.sessionStorage.setItem("app_sid", res.data.data.sid)
                this.loginForm.app_sid = res.data.data.sid
            })
        },
        loginFormbtn(){
        // 判断输入信息是否正确
        this.$refs.loginFormRef.validate(valid => {
            if (!valid) return 
            this.$http.post('/admin/login', this.loginForm).then(res=>{
                if ( res.data.code !== 200) return this.$message.error("登录失败");
                this.$message.success("登录成功")
                this.$router.push('/logon')
                this.bus.$emit('loginName', this.loginForm.name)
                }).catch(err=>{
                 console.log(err)
                })
        })
     }
   },
   watch:{}
})
</script>
<style lang='scss' scoped>
.login_bg{
    width: 100vw;
    height: 93vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../../src/static/logon.png') no-repeat;
    background-size: 100% 100%;
    .login{
        width: 55vw;
        height: 59vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: url('../../src/static/logon_bg.png') no-repeat;
        background-size: 100% 100%;
        .password{
            width: 27vw;
            height: 48vh;
            .passnum{
                width: 20vw;
                height: 30vh;
                >>>.el-input__inner{
                    height: 5.5vh;
                    color: #feffff;
                }
                >>>.el-button{
                   height: 5.5vh;
                   width: 16vw;
                   margin-top: 8vh;
                }
            }
            .title{
                width: 24vw;
                height: 15vh;
                color: #feffff;
                text-align: center;
                .hd{
                    font-size: 1.8vw;
                    font-weight: 700;
                    color: #feffff;
                }
            }
        }
    }
}
</style>

挂在路由守卫：

将token值保存到sessionStorage中：使用setItem()方法为用户登录成功之后添加一个token属性，用来为其验证身份，为了判断是否登录成功，有token值则表示登录成功，没有则表示没有登录，以后访问的页面都需要先经过登录之后才可以访问。
挂载路由导航守卫：为了防止用户直接在地址栏输入网址就可以访问到除了登录页之外的页面，所以需要设置路由导航守卫来使用户进行登录后才可以访问除了登录页之外的其他页面：
使用路由的beforeEach()方法来进行挂载。

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    // to将要访问的路径
    // from代表从哪个跳转而来
    // next一个函数,表示放行,若有参数则表示强制跳转的路径
    if (to.path == "/login") return next();
    const tokenStr = window.sessionStorage.getItem('token');
    if (!tokenStr) return next('/login');
    next();
})

退出：

<template>
    <div>
        <el-button type="info" @click="quit">退出</el-button>
    </div>
</template>

<script>
export default {
    methods:{
        quit:function(){
            // 退出功能主要是利用清除token的原理来实现
            // 清除token
            window.sessionStorage.clear();
            // 退出后回到登录页面
            this.$router.push('/login');
            // 显示退出成功
            this.$message.success('退出成功');
        }
    }
}
</script>

<style lang="less" scoped>

</style>