首先先了解一下，我们的效果实现流程

        首先登录概述及业务流程和相关技术点

                1.登录页面的布局
                2.创建两个Vue.js文件
                3.一个我们来做登录页和注册页
                4.登录页面的布局
                5.配置路由
                6.登录表单的数据绑定
                7.登录表单的验证规则
                8.登录表单的重置
                9.登录预验证
                10.登录组件配置弹窗提示
                11.登录成功后的行为
                12.将登录之后的token，保存到客户端的sessionStorage中
                13.通过编程式导航跳转到后台主页，路由地址是默认路径 '/'
                14.在我们首页的登出，组件配置弹窗提示，把我们的token使用removeItem删除

登录业务流程 

                1.在登录页面输入用户名和密码

                2.调用后台接口进行验证

                3.通过验证之后，根据后台得响应状态跳转到项目主页

登录功能实现

                1.首先我们用路由守卫来验证登录，判断是否与需要登录

 

{path:'/login',name:"login",component:login,meta:{login:true}
} // 需要登录的地方定义meta-true  看他需不需要登录if(to.matched.some(item=>item.meta.login)){//需要登录console.log("需要登录");if(isLogin){//1.已经登录，直接通过if(data.error===400){//后端告诉你，登录不成功next({name:'login'})localStorage.removeItem('token');return;}if(to.name==='login'){next({name:'Home'})}else{next()}return;}if(!isLogin && to.name==='login'){//2.未登录，但要去登录页next()}if(!isLogin && to.name !=='login'){//3.未登录，去的也不是登录页next({name:"login"})}}else{//不需要登录直接进next()}           

                2.表单的验证规则，我们用的是Element的组件库

在模板中用Element编写我们的样式布局

 <div class="login-section"><!-- :rules="rules" --><el-formlabel-position="top"label-width="100px" class="demo-ruleForm":rules="rules":model="rulesFrom"status-iconref="ruleFrom"><el-form-item label="用户名" prop="name"><!--             使用v-model来获取用户输入的名字                    --><el-input type="text" v-model="rulesFrom.name"></el-input></el-form-item><el-form-item label="密码" prop="password"></el-form-item><!--             使用v-model来获取用户输入的密码                    --><el-input type="password" v-model="rulesFrom.password"></el-input></el-form-item><el-form-item><!--                    定义提交事件             --><el-button type="primary" @click="submitFrom('ruleFrom')">提交</el-button><el-button>重置</el-button></el-form-item></el-form></div>

 定义表单的验证规则

 

详细的看Element官网from表单 

在Data里面定义

rulesFrom:{name:'',password:''},rules:{name:[// 验证规则{required:true,message:'请输入用户名',trigger:'blur'},{min:1,max:5,message:'长度在1到5个字符',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'},{min:1,max:5,message:'长度在1到5个字符',trigger:'blur'}]}

 在methods定义提交事件

 // 当我们点击提交的时候能出发方法能拿到表单的所有东西submitFrom(formName){this.$refs[formName].validate( (valid)=>{if(valid){// 如果校检通过，再里向后端返送用户信息和密码login({name:this.rulesFrom.name,password:this.rulesFrom.password,}).then((data)=>{console.log(data);if(data.code===0){localStorage.setItem('token',data.data.token)window.location.href='/';}if(data.code===1){this.$message.error(data.mes)}})}else{console.log('error submit!!');return false}})}

这个时候把登出也写一下在router beforeEach中给他转换

const token=localStorage.getItem('token');
//    ！！token转换成布尔类型const isLogin=!!token;
//    进入路由的时候，需要向后端返送token，验证是否合法const data=await userInfo();Store.commit('chageUserInfo',data.data)