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框架(登陆状态保存)的主要内容,如果未能解决你的问题,请参考以下文章

element ui框架(vuex模块化)

element ui框架(准备)

element ui框架(第一个element ui程序)

element ui框架(路由)

element ui框架(嵌套路由)

element ui框架(webpack打包器)