vue 用户名重复验证_Vue中的验证登录状态
Vue项目中实现用户登录及token验证
先说一下我的实现步骤:
使用easy-mock新建登录接口,模拟用户数据
使用axios请求登录接口,匹配账号和密码
账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页
前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token,没有就跳转到登录页面,有则跳转到对应路由页面。
注销后,就清除sessionStorage里的token信息并跳转到登录页面
使用easy-mock模拟用户数据
我用的是easy-mock,新建了一个接口,用于模拟用户数据:
{
"error_code": 0,
"data": [{
"id": '1',
"usertitle": "管理员",
"username": "admin",
"password": "123456",
"token": "@date(T)",
},
{
"id": '2',
"usertitle": "超级管理员",
"username": "root",
"password": "root",
"token": "@date(T)",
}
]
}
login.vue中写好登陆框:
用户名:
密码:
登录
export default {
data() {
return {
userName:'root',
passWord:'root'
}
}
}
然后下载axios:npm install axios --save,用来请求刚刚定义好的easy-mock接口:
login(){
const self = this;
axios.get('https://easy-mock.com/mock/5c7cd0f89d0184e94358d/museum/login').then(response=>{
var res =response.data.data,
len = res.length,
userNameArr= [],
passWordArr= [],
ses= window.sessionStorage;
// 拿到所有的username
for(var i=0; i
userNameArr.push(res[i].username);
passWordArr.push(res[i].password);
}
console.log(userNameArr, passWordArr);
if(userNameArr.indexOf(this.userName) === -1){
alert('账号不存在!');
}else{
var index = userNameArr.indexOf(this.userName);
if(passWordArr[index] === this.passWord){
// 把token放在sessionStorage中
ses.setItem('data', res[index].token);
this.$parent.$data.userTitle = res[index].usertitle;
//验证成功进入首页
this.startHacking ('登录成功!');
//跳转到首页
this.$router.push('/index');
// console.log(this.$router);
}else{
alert('密码错误!')
}
}
}).catch(err=>{
console.log('连接数据库失败!')
})
}
这一步最重要的是当账号密码正确时,把请求回来的token放在sessionStorage中,
配置路由
然后配置路由新加一个meta属性:
{
path: '/',
name: 'login',
component: login,
meta:{
needLogin: false
}
},
{
path: '/index',
name: 'index',
component: index,
meta:{
needLogin: true
}
}
判断每次路由跳转的链接是否需要登录,
导航卫士
在main.js中配置一个全局前置钩子函数:router.beforeEach(),他的作用就是在每次路由切换的时候调用
这个钩子方法会接收三个参数:to、from、next。
to:Route:即将要进入的目标的路由对象,
from:Route:当前导航正要离开的路由,
next:Function:个人理解这个方法就是函数结束后执行什么,先看官方解释
1.next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的),
2.next(false):中断当前的导航。如果浏览器的url改变了(可能是用户手动或浏览器后退按钮),那么url地址会重置到from路由对应的地址。
3.next('/')或next({path:'/'}):跳转到一个不同的地址。当前导航被中断,进入一个新的导航。
用sessionStorage存储用户token
//路由守卫
router.beforeEach((to, from, next)=>{
//路由中设置的needLogin字段就在to当中
if(window.sessionStorage.data){
console.log(window.sessionStorage);
// console.log(to.path) //每次跳转的路径
if(to.path === '/'){
//登录状态下 访问login.vue页面 会跳到index.vue
next({path: '/index'});
}else{
next();
}
}else{
// 如果没有session ,访问任何页面。都会进入到 登录页
if (to.path === '/') { // 如果是登录页面的话,直接next() -->解决注销后的循环执行bug
next();
} else { // 否则 跳转到登录页面
next({ path: '/' });
}
}
})
这里用了router.beforeEach vue-router导航守卫
每次跳转时都会判断sessionStorage中是否有token值,如果有则能正常跳转,如果没有那么就返回登录页面。
注销
至此就完成了一个简单的登录状态了,浏览器关闭后sessionStorage会清空的,所以当用户关闭浏览器再打开是需要重新登录的
当然也可以手动清除sessionStorage,清除动作可以做成注销登录,这个就简单了。
loginOut(){
// 注销后 清除session信息 ,并返回登录页
window.sessionStorage.removeItem('data');
this.common.startHacking(this, 'success', '注销成功!');
this.$router.push('/index');
}
写一个清除sessionStorag的方法。
一个简单的保存登录状态的小Demo。
vue-router守卫导航官方文档:vue-router导航守卫
vue 用户名重复验证_Vue中的验证登录状态相关推荐
- SLCP验厂辅导,SLCP验证员必须遵守验证协议中的验证规则以确保数据的质量和完整性
SLCP(Social&LaborConvergenceProject)是社会劳工整合项目的简称,该项目致力于通过创立和实施一个简单.统一和有效的行业范围的社会与劳工数据收集的融合评估框架(C ...
- html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
- html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
- vue 数组对象提取_vue中使用对象数组的最佳实践
前言: 在平常的开发中,经常会在vue中用到对象数组,如渲染一个小区的列表,数据结构可能如下所示: CommunityList: [ { _id: '', community_code: '', co ...
- php和app保持登录状态,关于iOS开发者中APP保持登录状态的几种实现方式和一些思考...
在实际开发中几乎所有的APP都会存在用户体系,假如没有涉及用户体系的APP,提交审核的时候有很大概率会被苹果爹地直接拒绝不允许上架.而有了用户体系,那么就肯定会存在登录以及保持登录的需求,要不然用户每 ...
- uni 登录token方法_uni-app 中保持用户登录状态
在应用中保持登录状态是一个应用常见的需求,本文简单介绍下在 uni-app 中如何保存用户登录状态. 简介 uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie ...
- vue 用户名重复验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
- vue 用户名重复验证_vue检查用户名是否重复
1.vue检查用户名是否重复 前端函数如下,js方法代码无需更改,前端代码逻辑在components\common\lab_header.vue 只需要修改components\axios_api\h ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
最新文章
- 浮点数在计算机中的表示
- 编程之美2.13 子数组的最大乘积
- MSG结构体和WndProc窗口过程详解
- python gif压缩_实用性视频转gif,压缩等常用文件工具处理及转换(含自写python工具)...
- 【已解决】Class not found: “com.bjpowernode.MyTest“
- HDUOJ1043Eight 八数码问题可以构造解
- 放心!没人在意你使用的是命令式编程还是声明式编程
- [摘录]第2章 中场谈判技巧
- winrar 命令行参数使用
- 小米笔记本PRO黑苹果使用第三方蓝牙设备
- html半透明遮罩,div背景半透明 覆盖整个可视区域的遮罩层效果
- IMWeb小白-诗歌作业
- MTK 连接CCT 连不上 出现CDC Serial驱动无法识别
- 【C++】公元前五世纪,我国古代数学家张丘建在《算经》一书中提出了“百鸡问题”:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。百钱买百鸡,问鸡翁、鸡母、鸡雏各几何?请设计一个“高效”的算法求解。
- Python自动检查哪位学生未提交作业
- 法国英语计算机硕士,法国留学 |无须法语成绩,巴黎高等电信学院2021年入学英文授课项目盘点~...
- UIlabel调整行间距
- ST-GCN demo运行记录
- 文件系统/var空间100%的问题
- python爬取链家网的房屋数据
热门文章
- 在Java开发中,判断list集合为空还是为null的区别
- 缺陷与出路—一个游戏开发者的反思
- 关于webapp中的文字单位的一些捣腾
- #H3C#无线 如何手动释放指定DHCP地址
- 论文笔记:U2Fusion A Unified Unsupervised ImageFusion Network(2020 TPAMI)
- 闷骚型的高级技术员写的SQL注入基础原理(超详细)
- 浅析选择广告联盟的四大标准
- three.js打造酷炫下雪效果
- 朴素贝叶斯算法实现 豆瓣Top250电影评价的情感分析与预测。​
- 哈哈哈!当前的人工智能有多智障?