element ui框架（登陆状态保存）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：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页面后，登入其他子页面。