首先先了解一下，我们的效果实现流程
首先登录概述及业务流程和相关技术点
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编写我们的样式布局
label-width="100px" class="demo-ruleForm"
:rules="rules"
:model="rulesFrom"
status-icon
ref="ruleFrom"
>
定义表单的验证规则
详细的看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.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)