vue实现用户登录,vue实现简单的登录页面
本文主要介绍vue登录和注销的实现实例。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
目录
登录业务流程登录功能实现摘要首先先了解一下，我们的效果实现流程
首先登录概述和业务流程及相关技术点。
录制页面的布局
创建两个Vue.js文件
让我们做登录页面和注册页面。
登录页面的布局
配置路由
登录表单的数据绑定
登录表单的验证规则
登录表单的重置
登录预验证
登录组件配置弹出提示
成功登录后的行为
登录到客户端的会话存储后保存令牌。
通过程序化导航跳转到后台首页，路由地址为默认路径/
在注销我们的主页时，组件配置弹出提示，并使用removeItem删除我们的令牌。
登录业务流程
1.在登录页面上输入用户名和密码。
2.调用后台接口进行验证。
3.验证通过后，根据后台响应状态跳转到项目首页
登录功能实现
1.首先，我们使用路由守卫来验证登录，并确定是否有必要登录。
{
路径：“/login”，
名称：登录，
组件：登录，
元：{
登录：真
}
}
//在需要登录的地方定义meta-true，看他是否需要登录。
如果(到。matched . some(item=item . meta . log in)){//需要登录
Console.log(“需要登录”)；
If(isLogin){//1。已经登录，直接通过
if(data . error==400){//后台告诉你登录不成功。
下一步({name:登录 })
local storage . remove item( token )；
返回；
}
if(to.name===login){
下一个({name:Home})
}否则{
下一个()
}
返回；
}
如果(！IsLogin to.name===login){//2。您尚未登录，但您想转到登录页面。
下一个()
}
如果(！isLogin to.name！==login){//3。我没有登录，去了登录页面。
下一步({name:登录 })
}
}else{//不需要直接登录。
下一个()
}
2.表单的验证规则，我们使用了组件库的元素。
使用模板中的元素编写我们的样式布局。
div class=登录部分
！- :rules=rules -
el格式
label-position=top
label-width= 100px class= demo-rule form
:rules=rules
:model=rulesFrom
状态图标
ref=ruleFrom
El-form-item标签=用户名属性=名称
！-使用v-model获取用户输入的名称-
el输入类型= text v-model= rules from . name /El输入
/El-表单-项目
El-form-item label= password prop= password /El-form-item
！-使用v-model获取用户输入的密码-
El-input type= password v-model= rules from . password /El-input
/El-表单-项目
El-表单-项目
！-定义提交事件-
El-button type= primary @ click= submit from( rule from )提交/el-button
El按钮复位/el按钮
/El-表单-项目
/el格式
/div
定义表单的验证规则
具体从表格上看元素官网。
在数据中定义
规则来自：{
名称：，
密码：“”
},
规则：{
名称：[
//验证规则
{必填：真，消息：请输入用户名，触发器：模糊 }，
{最小值：1，最大值：5，消息：长度为1到5个字符，触发器：模糊 }
],
密码：[
{必填：真，消息：请输入您的密码，触发器：模糊 }，
{最小值：1，最大值：5，消息：长度为1到5个字符，触发器：模糊 }
]
}
在方法中定义提交事件。
//当我们单击提交时，我们可以开始并获取表单中的所有内容。
submitFrom(formName){
这个。$ refs[表单名]。验证((有效)={
如果(有效){
//如果检查通过，将用户信息和密码发送回后端。
登录({
名称：this.rulesFrom.name，
密码：this.rulesFrom.password，
}).然后((数据)={
console.log(数据);
if(data.code===0){
localStorage.setItem(token ，data.data.token)
窗户。位置。href=/；
}
if(data.code===1){
这个message.error(data.mes)
}
})
}否则{
console.log(错误提交！);
返回错误的
}
})
}
这个时候把登出也写一下在每个之前的路由器中给他转换
const token=本地存储。getitem( token )；
//!代币转换成布尔类型
const isLogin=！代币
//进入路由的时候，需要向后端返送令牌，验证是否合法
const data=await userInfo()；
Store.commit(chageUserInfo ，data.data)
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。