本文主要介绍Vue登录功能的实现，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
写在前面登录概述登录业务流程登录业务相关技术点登录-—令牌原理分析登录功能实现登录表单布局登录表单数据绑定登录表单验证规则登录表单重置登录预验证登录组件配置弹出提示
写在前面
vue文件结尾应该是空白的，否则会报错，真的很奇妙…
登录概述
登录业务流程
1.在登录页面上输入用户名和密码。
2.调用后台接口进行验证。
3.验证通过后，根据后台响应状态跳转到项目首页
登录业务的相关技术点
Http是无状态的。它在客户端用cookie记录状态，在服务器端用会话记录状态，用令牌维护状态。
这里说清楚！
登录—token原理分析
1.登录页面输入用户名和密码登录。
2.服务器通过验证后，生成用户的令牌并返回。
3.客户端存储令牌。
4.所有后续请求都携带令牌来发送请求。
5.服务器验证令牌是否通过。
登录功能实现
登录页面的布局
通过元素-UI组件实现布局
el格式
El-表单-项目
el输入
el按钮
字体图标
在vscode中打开终端ctrl ~
Git状态查看当前git状态
Git checkout -b login创建了一个名为login的新分支。
Git支路交换支路
从vue ui开始！
终端命令npm run serve也可以运行！
在组件文件下创建一个vue文件。
从“vue”导入Vue
从“vue路由器”导入vue路由器
从'导入登录。/components/login.vue '
Vue.use(VueRouter)
常量路由=[
{路径：“/login”，组件：login}
]
const router=new VueRouter({
路线
})
导出默认路由器
配置路由(并添加路由重定向)
const router=new VueRouter({
路线：[
{
路径：“/”，
重定向：“/login”
},
{
路径：“/login”，
组件：登录
}
]
})
一定要注意空格，不然报错，妈的！
页面书写
先给个全局样式表。
/*全局样式表*/
html，
身体，
#app{
身高：100%；
边距：0；
填充：0；
}
并将其导入main.js中
“导入”。/assets/css/global.css '
登录框居中。
注意：translate 进行移动，完成真正的居中。登录框{
宽度：450px
高度：300px
背景色：# fff
位置：绝对；
左：50%；
top:50%；
transform: translate(-50%，-50%)；
}
添加登录图标。avatar_box{
高度：130px
宽度：130px
边框：1px纯色# eee
边界半径：50%；
填充：10px
盒影：0px 0px 10px # ddd
位置：绝对；
左：50%；
transform: translate(-50%，-50%)；
背景色：# fff
img{
宽度：100%；
身高：100%；
边界半径：50%；
背景色：# eee
}
}
登录表单的布局
通过元素-UI组件实现布局
el格式
El-表单-项目
el输入
el按钮
字体图标
元素组件库网页
你可以在网站上找到一些可以使用的基本模板代码。
导入组件
从“vue”导入Vue
从“element-ui”//单独导入{button，form，formitem，input}将报告错误。
Vue.use(按钮)
Vue.use(表单)
Vue.use(FormItem)
Vue.use(输入)
中间的窗体和按钮直接在上面的组件库中找到。
有些中间代码不贴，比较枯燥。
特别是我们的小图标是从阿里的图标库中下载的。
具体用法可以参考之前写的一篇博客。
阿里巴巴图标尽在掌握(如何将图标库引入前端，漂亮的图标任你处置T.T .)
登录表单的数据绑定
1.model="loginform "绑定表单。
2.在form-item中将数据对象与v-model绑定。
3.data()返回导出默认值中的表单数据
登录表单的验证规则
1.rules=' ruleform '绑定规则。
2.将form-item中的prop属性设置为要检查的字段名称。
//这是表单的验证规则对象
loginFormRules: {
//验证用户名是否合法
用户名：[
{必填：真，消息：'请输入登录名'，触发器：'模糊' }，
{最小值：3，最大值：10，消息：'长度为3到10个字符'，触发器：'模糊' }
],
//验证密码是否合法。
密码：[
{必填：真，消息：'请输入登录密码'，触发器：'模糊' }，
{最少6个，最多15个，消息：'长度为6到15个字符'，触发器：'模糊' }
]
}
登录表单的重置
1.在el-form中添加ref参考名称以获取该表单。
2.向方法中添加一个方法，并使用此。$ refs . loginfomref . resetfields()来重置表单。请注意，表单的值将成为数据中设置的初始值。
登录预验证
1.同样的这个。$ refs.loginformref.validate()
2.配置axios
从“axios”导入axios
//配置请求的根路径
axios . defaults . baseurl=' https://127 . 0 . 0 . 1:8888/API/private/v1/'
Vue.prototype.$http=axios
3.获得如下查询结果
使用async和await获取返回的结果。
这个。$ refs . loginformref . validate(async valid={
如果(！有效)返回
const { data: res }=等待此消息。$http.post('login '，this.loginForm)
console.log(res)
if (res.meta.status！==200)返回console.log('登录失败')
Console.log(“登录成功”)
})
登录组件配置弹窗提示
1.将消息引入element.js，并将其挂载到vue上。
Vue。原型。$ message=message//安装在Vue上
2.称之为。$message.error('直接('登录失败！)
成功登录后的行为
1.登录到客户端的会话存储后保存令牌。
1.登录后必须访问项目中除登录之外的其他API接口。
2 .令牌应该仅在当前网站打开时生效，因此将令牌保存在sessionStorage中。
该令牌存储在会话存储中。
2.通过程序化导航跳转到后台首页，路由地址为/home。
window . session storage . setitem(' token '，' RES . data . token ')//保存令牌。这里是随机保存的定值。
这个。$router.push('/home') //跳转路线，进入下一页。
关于Vue登录功能实现的这篇文章到此为止。更多相关Vue登录内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。