vue elementui 表单校验+实现登录功能+退出功能

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

使用show-password属性即可得到一个可切换显示隐藏的密码框

<!-- 登录表单-->
            <el-form ref="loginFormRef" class = "login-form" :model="loginForm" :rules="loginFormRules">
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>                   
                </el-form-item>
                <el-form-item prop="password">
                    <el-input show-password placeholder="请输入密码" prefix-icon="iconfont icon-lock_fill" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" class="login-btn" @click="login">登录</el-button>
                </el-form-item>
            </el-form>

<script>
export default {
    data(){
        return{
            // 存储登录表单输入的数据(表单的数据绑定对象)
            loginForm:{
                username:'',
                password:''
            },
            // 表单的校验规则
            loginFormRules:{
                username: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        login(){
            // 判断校验是否成功  （取到表单对象） 点击等候先校验 valid校验成功返回true
            this.$refs.loginFormRef.validate(valid=>{
                if(!valid){
                    return
                }
                // 发送请求判断是否登录成功
                console.log('点击登录发送请求')
            })
            
        }
    }
    
}
</script>

<script>
export default {
    data(){
        return{
            // 存储登录表单输入的数据(表单的数据绑定对象)
            loginForm:{
                username:'',
                password:''
            },
            // 表单的校验规则
            loginFormRules:{
                username: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        login(){
             // 判断校验是否成功  （取到表单对象） 点击等候先校验 valid校验成功返回true 这样不用每次点击登录就发请求校验
            this.$refs.loginFormRef.validate(async valid=>{
                if(!valid){
                    return
                }
                // 发送请求判断是否登录成功（用户信息在res.data中）
                const {data:res} = await this.$http.post('/login',this.loginForm)
                if(res.meta.status !==200){
                    return this.$message.error('登录失败');
                }
                this.$message.success('登陆成功')
                // 将用户信息保存到sessionStorage中
                sessionStorage.setItem('userInfo',JSON.stringify(res.data))
                this.$router.push('/home')
            })
            
        }
    }
    
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

// 导入全局样式表
import './assets/imgs/css/global.css'
//导入字体图标
import './assets/fonts/iconfont.css'
// 引入axios
import axios from 'axios'
Vue.prototype.$http = axios
    // 配置axios基础路径
axios.defaults.baseURL = 'http://www.tangxiaoyang.vip:8888/api/v2'


Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'


Vue.use(VueRouter)

const routes = [
    // 访问根路径的时候跳转到login
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/home',
        component: () =>
            import ('../components/Home.vue')
    }
]

const router = new VueRouter({
    routes
})

export default router

components 新建home组件

很多页面在未登录的情况下是不允许访问，所以需要对路由进行限制

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'


Vue.use(VueRouter)

const routes = [
    // 访问根路径的时候跳转到login
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/home',
        component: () =>
            import ('../components/Home.vue')
    }
]

const router = new VueRouter({
    routes
})

// 配置路由守卫
// 目标路由对象(包含路由信息)，来源路由对象，接下来要执行的操作
router.beforeEach((to, from, next) => {
    // 如果访问登录页面,则放行
    if (to.path === '/login') {
        return next()
    }
    // 如果访问的不是登录页面并且用户未登录，则跳转到/login 从sessionStorage中获取用户信息,因为在登录功能中成功时向sessionStorage中存储了
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    if (!userInfo) {
        return next('/login')
    }
    // 如果用户已登录,则放行
    next()
})
export default router

methods:{
        login(){
            // 判断校验是否成功  （取到表单对象） 点击等候先校验 valid校验成功返回true 这样不用每次点击登录就发请求校验
            this.$refs.loginFormRef.validate(async valid=>{
                if(!valid){
                    return
                }
                // 发送请求判断是否登录成功（用户信息在res.data中）
                const {data:res} = await this.$http.post('login',this.loginForm)
                if(res.meta.status !==200){
                    return this.$message.error('登录失败');
                }
                this.$message.success('登陆成功')
                // 将用户信息保存到sessionStorage中
                sessionStorage.setItem('userInfo',JSON.stringify(res.data))
                this.$router.push('/home')
            })
            
        }
    }

Home.vue

<template>
    <el-container>
        <!-- 头部 -->
  <el-header>
      <div class="left">
          <img src="../assets/imgs/shop.png" alt="">
          <span>后台管理系统</span>
      </div>
      <div class="right">
          <span>欢迎您：{{userInfo.username}}</span>
          <el-button type="danger" size="mini" @click="logout">退出</el-button>
      </div>
  </el-header>
  <el-container>
      <!-- 侧边栏 -->
    <el-aside width="200px">Aside</el-aside>
    <!-- 主题区域 -->
    <el-main>Main</el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data(){
        return{
            userInfo:null
        }
    },

    created(){
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    },
    methods:{
        logout(){
            this.$confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // 点击确定后  清除session用户信息
          sessionStorage.clear()
          // 跳转到登录页面
          this.$router.push('/login')
        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消退出'
        //   });          
        });
        }
    }
    
}
</script>

<style lang='less' scope>
    .el-container{
        height: 100px;
    }
    .el-header{
        background: url('../assets/imgs/header_bg.gif') repeat-x center;  
        height: 50px!important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: white;
        .left{
            display: flex;  //显示在同一行
            align-items: center; // 垂直对齐
            img{
                width: 40px;
                margin-right: 20px; // 图片和文字的距离
            }
            span{
                font-size: 20px;
            }
        }
        .right{
            margin-left: 10px;

        }
    }
</style>