element ui框架(登陆状态保存)
Posted 嵌入式-老费
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element ui框架(登陆状态保存)相关的知识,希望对你有一定的参考价值。
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】
web前端开发中很重要的一点就是登录状态的保存。这么做有几个好处,一是避免了用户需要频繁登陆密码;另外一个就是确保用户在使用所有功能之前已经处于登录状态了。要实现这一要求,可以通过使用sessionStorage和路由劫持的方法来解决。
1、在客户输入密码之后,就开始记录登录状态
submitForm(formName)
//alert('submit!');
this.$refs[formName].validate((valid) =>
if (valid)
sessionStorage.setItem('isLogin','true'); //保存到sessionStorage
this.$router.push(name:"Main",params:"name":this.form.name);
else
this.$message.error('请输入正确用户名或密码!');
return false;
);
上面这段代码中,最重要的就是sessionStorage.setItem这个语句。
2、在路由钩子函数中增加判断
router.beforeEach((to,from,next)=>
let isLogin = sessionStorage.getItem('isLogin')
if(to.path=='/Logout')
sessionStorage.clear()
next(path:"/Login")
else if(to.path == '/Login')
if(isLogin != null)
next(path:'/Main/admin') //这里和下面都作弊了,相关数据应该从vuex获取,后面会涉及到
else if(to.path == '/')
if(isLogin != null)
next(path:'/Main/admin')
else
next(path:'/Login')
else if(isLogin == null)
next(path:'/Login')
next();
)
这段代码是放在main.js中。可以简单来分析下,首先如果是登出,那么清除sessionStorage,重新进入登入页面;如果是去登入页面或者根页面,但已经处于登入状态,那么直接进入主页面;如果是根页面,要么去Login页面,要么去Main页面;如果不是上面三种,但是没有处于登陆状态,那么先进入登录页面;剩下来的就是直接访问了。
注意,上面有个地方作弊了,没有记录当前用户是谁,直接使用了admin,这部分需要在后续使用vuex的时候涉及。
3、添加一个Logout链接
在Main.vue中增加一个推出的链接,
<el-dropdown-item>
<router-link to="/Logout">退出登录 </router-link>
</el-dropdown-item>
4、开始测试
可以测试这么几种情况,
4.1 直接登入根页面,验证是否进入Login页面;
4.2 进入Main页面后,重新登入根页面;
4.3 进入Main页面后,退出再登入;
4.4 进入Main页面后,重新登入Login页面。
4.5 进入Main页面后,登入其他子页面。
以上是关于element ui框架(登陆状态保存)的主要内容,如果未能解决你的问题,请参考以下文章