样式 & 安全

src/layouts/defaultLayout.vue

@@ -27,7 +27,9 @@ export default {
   },
   methods: {
     direct(link) {
-      this.$router.push(link);
+      if (this.$route.path !== link) {
+        this.$router.push(link);
+      }
     },
   },
 };

src/layouts/studentLayout.vue

@@ -56,7 +56,19 @@ export default {
   },
   methods: {
     direct(link) {
-      this.$router.push(link);
+      if (link === "/") {
+        this.logout();
+      }
+      if (this.$route.path !== link) {
+        this.$router.push(link);
+      }
+    },
+
+    logout() {
+      window.localStorage.removeItem("userId");
+      window.localStorage.removeItem("userPhone");
+      window.localStorage.removeItem("username");
+      window.localStorage.removeItem("userRole");
     },
   },
 };

src/layouts/teacherLayout.vue

@@ -52,7 +52,19 @@ export default {
   },
   methods: {
     direct(link) {
-      this.$router.push(link);
+      if (link === "/") {
+        this.logout();
+      }
+      if (this.$route.path !== link) {
+        this.$router.push(link);
+      }
+    },
+
+    logout() {
+      window.localStorage.removeItem("userId");
+      window.localStorage.removeItem("userPhone");
+      window.localStorage.removeItem("username");
+      window.localStorage.removeItem("userRole");
     },
   },
 };

src/router/index.js

@@ -18,6 +18,8 @@ import Login from "@/views/Login.vue";
 import Register from "@/views/Register.vue";
 import Home from "@/views/Home.vue";
 
+import { judgeTeacher, judgeStudent  } from "@/util/auth";
+
 Vue.use(VueRouter);
 
 const routes = [
@@ -110,4 +112,15 @@ const router = new VueRouter({
   routes
 });
 
+router.beforeEach((to, from, next) => {
+  let legal = false;
+  if (!to.path.startsWith("/student") && !to.path.startsWith("/teacher")) legal = true;
+  if (to.path.startsWith("/student") && judgeStudent()) legal = true;
+  if (to.path.startsWith("/teacher") && judgeTeacher()) legal = true;
+  if (to.name === "CoursePeek") legal = true;
+  if (legal) {
+    next();
+  }
+})
+
 export default router;

src/util/auth.js

@@ -0,0 +1,12 @@
+export const judgeLogin = () => {
+  return !!window.localStorage.getItem("userId");
+}
+
+export const judgeStudent = () => {
+  return judgeLogin() && window.localStorage.getItem("userRole") === "STUDENT";
+}
+
+export const judgeTeacher = () => {
+  return judgeLogin() && window.localStorage.getItem("userRole") === "TEACHER";
+}
+ 

src/views/Login.vue

@@ -3,7 +3,7 @@
     <v-container class="pl-16 pr-16">
       <!-- alert -->
       <v-alert
-        class="dialog"
+        class="alert"
         outlined
         type="success"
         text
@@ -14,7 +14,7 @@
       </v-alert>
       <!-- alert -->
       <v-alert
-        class="dialog"
+        class="alert"
         outlined
         type="warning"
         text
@@ -104,12 +104,14 @@ export default {
 </script>
 
 <style scoped>
-.dialog {
-  position: fixed;
-  left: 50%;
-}
 .form {
   position: relative;
   top: 50px;
 }
+.alert {
+  position: fixed;
+  left: 50%;
+  top: 100px;
+  z-index: 999;
+}
 </style>

src/views/Register.vue

@@ -3,7 +3,7 @@
     <v-container class="pl-16 pr-16">
       <!-- alert -->
       <v-alert
-        class="dialog"
+        class="alert"
         outlined
         type="success"
         text
@@ -14,7 +14,7 @@
       </v-alert>
       <!-- alert -->
       <v-alert
-        class="dialog"
+        class="alert"
         outlined
         type="warning"
         text
@@ -103,12 +103,14 @@ export default {
 </script>
 
 <style scoped>
-.dialog {
-  position: fixed;
-  left: 50%;
-}
 .form {
   position: relative;
   top: 50px;
 }
+.alert {
+  position: fixed;
+  left: 50%;
+  top: 100px;
+  z-index: 999;
+}
 </style>

src/views/student/CourseStudy.vue

@@ -99,6 +99,7 @@
       </template>
 
       <v-row>
+        <!-- 课件 -->
         <v-col>
           <v-card max-width="600" class="mx-auto mt-8">
             <v-toolbar color="indigo lighten-2" dark>
@@ -136,6 +137,7 @@
             </v-list>
           </v-card>
         </v-col>
+        <!-- 课程信息 -->
         <v-col>
           <form class="pa-12 grey lighten-5 mt-8">
             <v-text-field
@@ -281,5 +283,6 @@ export default {
   position: fixed;
   left: 50%;
   top: 100px;
+  z-index: 999;
 }
 </style>

src/views/student/UserCenter.vue

@@ -132,5 +132,6 @@ export default {
   position: fixed;
   left: 50%;
   top: 100px;
+  z-index: 999;
 }
 </style>

src/views/teacher/CourseCreate.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- alert -->
     <v-alert
-      class="dialog"
+      class="alert"
       outlined
       type="success"
       text
@@ -13,7 +13,7 @@
     </v-alert>
     <!-- alert -->
     <v-alert
-      class="dialog"
+      class="alert"
       outlined
       type="warning"
       text
@@ -131,9 +131,10 @@ export default {
 </script>
 
 <style scoped>
-.dialog {
+.alert {
   position: fixed;
   left: 50%;
   top: 100px;
+  z-index: 999;
 }
 </style>

src/views/teacher/CourseEdit.vue

@@ -3,7 +3,7 @@
     <v-container class="pl-16 pr-16">
       <!-- alert-->
       <v-alert
-        class="dialog"
+        class="alert"
         outlined
         type="success"
         text
@@ -362,9 +362,10 @@ export default {
 </script>
 
 <style scoped>
-.dialog {
+.alert {
   position: fixed;
   left: 50%;
   top: 100px;
+  z-index: 999;
 }
 </style>

src/views/teacher/UserCenter.vue

@@ -132,5 +132,6 @@ export default {
   position: fixed;
   left: 50%;
   top: 100px;
+  z-index: 999;
 }
 </style>