feat:add permission management of course details page

src/App.vue

@@ -3,7 +3,20 @@
 </template>
 
 <script>
+// import store from "@/store";
+
 export default {
+  // created() {
+  //   //Vuex相关
+  //   // 在页面加载时读取sessionStorage里的状态信息
+  //   if (sessionStorage.getItem("store")) {
+  //     store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStorage.getItem("store"))));
+  //   }
+  //   // 在页面刷新时将vuex里的信息保存到sessionStorage里
+  //   window.addEventListener("beforeunload", () => {
+  //     sessionStorage.setItem("store", JSON.stringify(store.state));
+  //   });
+  // },
   mounted() {
     const that = this;
     if (sessionStorage.token) {
@@ -18,4 +31,4 @@ export default {
     };
   },
 };
-</script>
+</script>

src/main.js

@@ -16,7 +16,7 @@ app.directive("title", {
 
 app.directive("teacher-permission", {
   mounted(el, binding) {
-    if (binding.value.role !== "teacher") {
+    if (binding.value.role.toUpperCase() !== "TEACHER") {
       el.parentNode.removeChild(el);
     }
   },
@@ -24,7 +24,7 @@ app.directive("teacher-permission", {
 
 app.directive("student-permission", {
   mounted(el, binding) {
-    if (binding.value.role !== "student") {
+    if (binding.value.role.toUpperCase() !== "STUDENT") {
       el.parentNode.removeChild(el);
     }
   },

src/views/CoursePage/CourseDetail.vue

@@ -31,7 +31,6 @@
           <el-radio-button label="notice">通知栏</el-radio-button>
           <el-radio-button label="courseware">课件列表</el-radio-button>
         </el-radio-group>
-        <!--        <el-button v-teacher-permission="{role:'teacher'}" plain type="warning">添加发布</el-button>-->
         <el-popover v-if="tabName==='notice'" v-model:visible="showPopover" :width="160" placement="bottom">
           <div class="sel-notice-type">
             <div :style="{color:themeColor.orange}" class="notice-type-icon">
@@ -58,13 +57,13 @@
             </div>
           </div>
           <template #reference>
-            <el-button v-teacher-permission="{role:'teacher'}" plain type="warning" @click="showPopover = true">添加发布
+            <el-button v-teacher-permission="{role:role}" plain type="warning" @click="showPopover = true">添加发布
             </el-button>
           </template>
         </el-popover>
         <el-upload
             v-if="tabName==='courseware'"
-            v-teacher-permission="{role:'teacher'}"
+            v-teacher-permission="{role:role}"
             :action="actionUrl"
             :http-request="handleFileUploading"
             :on-success="handFileUploadSuccess"
@@ -163,7 +162,9 @@ import GlobalHeader from "../../../src/components/GlobalHeader";
 import NoticeItem from "./components/NoticeItem";
 import FileEntry from "./components/FileEntry";
 import {reactive, ref} from "vue";
+import {useStore} from "vuex";
 
+const role = useStore().state.user.role;
 
 const newNoticeType = reactive({type: "", title: "", color: ""});
 const showNewNoticeDialog = ref(false);