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页面后，登入其他子页面。