vue做登录,vue 用户登录
这篇文章主要为大家详细介绍了VUE实现注册与登录效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了VUE实现注册与登录效果的具体代码，供大家参考，具体内容如下
1.效果展示
2.注册效果实现
模板
div class=登录部分
埃尔格式
label-position= top label-width= 100p x class=演示规则表单
:rules=rules
:model=rulesForm
状态图标
ref=ruleForm
El-表单-项目标签=用户名prop=name
El-input type= text v-model=规则表单。名称/El-输入
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-input type= password v-model=规则表单。密码/El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )提交/el-button
埃尔按钮重置/el-button
/El-表单-项目
/el格式
/div
/模板
脚本
从" @/服务/api "导入{注册}；
导出默认值{
data() {
返回{
规则表单：{
名称：,
密码：""
},
规则：{
名称：[
{必需：真，消息：请输入名字，触发：模糊 },
{最少：1,最多：5,消息：长度3-5 ,触发器："模糊"}
],
密码：[
{必需：真，消息：请输入密码，触发：模糊 },
{最少：3,最多：5,消息：长度3-5 ,触发器："模糊"}
]
}
};
},
方法：{
submitForm(formName){
这个参考文献[表单名]。验证((有效)={
如果（有效){
//如果校检通过，在这里向后端发送用户名和密码
注册({
名称：this.rulesForm.name，
密码：this.rulesForm.password，
}).然后((数据)={
console.log(数据)
if(data.code===0){
localStorage.setItem(token ，数据。数据。token)；
窗户。位置。href=/；
}
if(data.code===1){
这个message.error(data.mes)
}
});
}否则{
console.log(错误提交！);
返回错误的
}
});
}
}
}
/脚本
style lang=stylus 。登录部分
填充0px 20px
/风格
3.登录页面实现
模板
div class=登录部分
埃尔格式
label-position=top
label-width= 100px class=演示规则表单
:rules=rules
:model=rulesForm
状态图标
ref=ruleForm
El-表单-项目标签=用户名prop=name
El-input type= text v-model=规则表单。名称/El-输入
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-input type= password v-model=规则表单。密码/El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )提交/el-button
埃尔按钮重置/el-button
/El-表单-项目
/el格式
/div
/模板
脚本
从"@/服务/api "导入{登录}；
导出默认值{
data() {
返回{
//存储数据的对象
规则表单：{
名称：,
密码：""
},
规则：{
名称：[
{必需：真，消息：请输入名字，触发：模糊 },
{最少：1,最多：5,消息：长度3-5 ,触发器："模糊"}
],
密码：[
{必需：真，消息：请输入密码，触发：模糊 },
{最少：3,最多：5,消息：长度3-5 ,触发器："模糊"}
]
}
};
},
方法：{
submitForm(formName){
这个参考文献[表单名]。验证((有效)={
如果（有效){
//如果校检通过，在这里向后端发送用户名和密码
登录({
名称：this.rulesForm.name，
密码：this.rulesForm.password，
}).然后((数据)={
console.log(数据)
if(data.code===0){
localStorage.setItem(token ，数据。数据。token)；
窗户。位置。href=/；
}
if(data.code===1){
这个message.error(data.mes)
}
});
}否则{
console.log(错误提交！);
返回错误的
}
});
}
}
}
/脚本
style lang=stylus 。登录部分
填充0px 20px
/风格
4.路由跳转实现
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
Vue.use(路由器)
从" @/商店"导入商店
从" @/service/api.js "导入{userInfo}
从" @/views/user-login/index.vue "导入登录
常量路由器=新路由器({
模式："历史",
路线：[
{
路径："/登录"，
名称：登录，
标题：登录页，
组件：登录，
元：{
登录：真
}
}
]
});
//路由守卫
router.beforeEach( async (to，from，next)={
/*
有些路由是需要登录的，判断登录状态
1.没有登录：跳转到登录页
2.登录：直接进入
有些路由是不需要登录的，直接进入
ps:是否需要登录- meta
*/
const token=本地存储。getitem( token )；
const isLogin=！代币
//进入路由的时候，需要向后端发送令牌，验证是否合法
const data=await userInfo()；
Store.commit(chageUserInfo ，data.data)
如果(到。匹配。一些(item=item。meta。登录)){//需要登录
console.log(需要登录);
if(isLogin){//已经登录的，直接通过
if(data.error===400){//后端告诉你，登录不成功
下一步({ name:登录 })；
本地存储。移除项目(“令牌”)；
返回；
}
if(to.name===login){
下一个({ name: home })；
}否则{
next()；
}
返回；
}
如果(!isLogin to.name===login){//未登录，但是要去登录页
next()；
}
如果(!isLogin to.name！==登录){//未登录，去的也不是登录页
下一步({ name:登录 })；
}
}否则{
next()；
}
})
导出默认路由器；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。