Vue实现登录以及登出详解
目录
- 登录业务流程
- 登录功能实现
- 总结
首先登录概述及业务流程和相关技术点
- 录页面的布局
- 创建两个Vue.js文件
- 一个我们来做登录页和注册页
- 登录页面的布局
- 配置路由
- 登录表单的数据绑定
- 登录表单的验证规则
- 登录表单的重置
- 登录预验证
- 登录组件配置弹窗提示
- 登录成功后的行为
- 将登录之后的token,保存到客户端的sessionStorage中
- 通过编程式导航跳转到后台主页,路由地址是默认路径 '/'
- 在我们首页的登出,组件配置弹窗提示,把我们的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编写我们的样式布局
提交 重置
定义表单的验证规则
文章图片
详细的看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='https://www.it610.com/'; }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=https://www.it610.com/article/await userInfo(); Store.commit('chageUserInfo',data.data)
总结 【Vue实现登录以及登出详解】本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆