保存登录状态

src/App.vue

@@ -20,7 +20,7 @@
 		// }
 		watch: {
 			'$route'(to, from) {//监听路由改变
-				let user = JSON.parse(localStorage.getItem('user'));
+				let user = JSON.parse(sessionStorage.getItem('user'));
 				if (!user) {
 					this.$router.replace('/login')
 				}

src/main.js

@@ -86,10 +86,8 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   NProgress.start();
-  let user = JSON.parse(localStorage.getItem('user'));
-  console.log(user); console.log(to);
+  let user = JSON.parse(sessionStorage.getItem('user'));
   if (!user && to.path != '/login') {
-    console.log('lgout');
     next({ path: '/login' })
   }
   next()

src/mockdata/user.js

@@ -4,7 +4,7 @@ const LoginUsers = [
     id: 1,
     username: 'admin',
     password: '123456',
-    avatar: '',
+    avatar: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png',
     name: '张某某'
   }
 ];

src/pages/Home.vue

@@ -7,7 +7,7 @@
 </el-col>
 <el-col :span="4" class="rightbar">
 	<el-dropdown trigger="click">
-		<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img src="../assets/user.png" class="head"> 张某某
+		<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}}
 </span>
 <el-dropdown-menu slot="dropdown">
 	<el-dropdown-item>我的消息</el-dropdown-item>
@@ -82,6 +82,8 @@
 				currentPath: '/table',
 				currentPathName: 'Table',
 				currentPathNameParent: '导航一',
+				sysUserName: '',
+				sysUserAvatar: '',
 				form: {
 					name: '',
 					region: '',
@@ -94,13 +96,13 @@
 				}
 			}
 		},
-		// watch: {
-		// 	'$route'(to, from) {//监听路由改变
-		// 		this.currentPath = to.path;
-		// 		this.currentPathName = to.name;
-		// 		this.currentPathNameParent = to.matched[0].name;
-		// 	}
-		// },
+		watch: {
+			'$route'(to, from) {//监听路由改变
+				this.currentPath = to.path;
+				this.currentPathName = to.name;
+				this.currentPathNameParent = to.matched[0].name;
+			}
+		},
 		methods: {
 			onSubmit() {
 				console.log('submit!');
@@ -119,7 +121,7 @@
 				this.$confirm('确认退出吗?', '提示', {
 					//type: 'warning'
 				}).then(() => {
-					localStorage.removeItem('user');
+					sessionStorage.removeItem('user');
 					_this.$router.replace('/login');
 				}).catch(() => {
 
@@ -132,6 +134,13 @@
 			this.currentPath = this.$route.path;
 			this.currentPathName = this.$route.name;
 			this.currentPathNameParent = this.$route.matched[0].name;
+
+			var user = sessionStorage.getItem('user');
+			if (user) {
+				user = JSON.parse(user);
+				this.sysUserName = user.name || '';
+				this.sysUserAvatar = user.avatar || '';
+			}
 		}
 	}
 </script>

src/pages/Login.vue

@@ -62,13 +62,9 @@
                   type: 'error'
                 });
               } else {
-                localStorage.setItem('user', JSON.stringify(user));
-                if (this.$route.query.redirect) {
-                  this.$router.push({ path: this.$route.query.redirect });
-                } else {
+                sessionStorage.setItem('user', JSON.stringify(user));
                 this.$router.push({ path: '/table' });
               }
-              }
             });
           } else {
             console.log('error submit!!');