feat: 完成登录状态维持

src/store/index.js

@@ -1,5 +1,7 @@
 import { createStore } from 'vuex'
 import bok from '@/store/bok'
+import {getUserInfo} from "../api/user";
+import {jumpToLogin} from "../api/axios.config";
 
 export default createStore({
   state: {
@@ -13,9 +15,18 @@ export default createStore({
     },
     setToken(state, token){
       state.token = token;
+      localStorage.setItem('token', token);
     },
     setUser(state, user){
       state.user = user;
+      localStorage.setItem('user', user);
+    },
+    logout(state){
+      state.token = null;
+      localStorage.removeItem('token');
+      state.user = null;
+      localStorage.removeItem('user');
+      jumpToLogin();
     }
   },
   actions: {
@@ -27,9 +38,24 @@ export default createStore({
   },
   getters: {
     showCount: state => {
-      return '苏的state:'+state.myCount;
+      return 'state:'+state.myCount;
+    },
+    isLogin: state => {
+      if(state.token){
+        return true;
+      }else if(localStorage.getItem('token')){
+        state.token = localStorage.getItem('token');
+        getUserInfo().then(({ data }) => {
+          state.user = data.result;
+        }).catch(err => {
+          console.log(err);
+          jumpToLogin();
+        })
+        return true;
+      }else{
+        return false;
+      }
     },
-    isLogin: state => Boolean(state.token),
 
   },
   modules: {

src/views/Bok/NavBar.vue

@@ -1,65 +1,71 @@
 <template>
-    <div class="navbar-wrapper">
-        <el-input placeholder="请输入内容" v-model="searchContent" size="mini" class="input-with-select"
-        v-if="$route.path!=='/search'" @keydown.enter="clickSearch">
-            <template #append>
-                <el-button icon="el-icon-search" @click="clickSearch"/>
-            </template>
-        </el-input>
-        <el-dropdown trigger="click" style="position: absolute;top: 0px;right: 0px">
-          <p style="position: absolute;top: 15px;left: -80px">{{$store.state.user.name}}</p>
-            <el-avatar shape="square" :size="30" :src="squareUrl"></el-avatar>
-            <template #dropdown>
-                <el-dropdown-menu>
-                    <el-dropdown-item>{{$store.state.user.name}}</el-dropdown-item>
-                    <el-dropdown-item>选项2</el-dropdown-item>
-                    <el-dropdown-item>选项3</el-dropdown-item>
-                    <el-dropdown-item>选项4</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </div>
+  <div class="navbar-wrapper">
+    <el-input placeholder="请输入内容" v-model="searchContent" size="mini" class="input-with-select"
+              v-if="$route.path!=='/search'" @keydown.enter="clickSearch">
+      <template #append>
+        <el-button icon="el-icon-search" @click="clickSearch"/>
+      </template>
+    </el-input>
+    <el-dropdown trigger="click" style="position: absolute;top: 0px;right: 0px">
+      <div class="user-wrap">
+        <span class="user-name">{{ $store.state.user.name }}</span>
+        <el-avatar shape="square" :size="30" :src="squareUrl"></el-avatar>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+<!--          <el-dropdown-item>{{ $store.state.user.name }}</el-dropdown-item>-->
+          <el-dropdown-item @click="logout">
+            <i class="el-icon-switch-button"></i>
+            登出
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "NavBar",
-    data() {
-        return {
-            //
-            searchContent: "",
+  name: "NavBar",
+  data() {
+    return {
+      //
+      searchContent: "",
 
-            systemName: "bok",
-            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
-        }
-    },
-    computed: {
-        path() {
-            const _this = this
-            let res = _this.$store.getters['bok/getPath'].split("/")
-            res[0] = _this.systemName
-            return res
-        }
-    },
-    mounted() {
-    },
-    methods: {
-        //
-        clickSearch(){
-            const _this = this
-            let content = _this.searchContent
-            _this.searchContent = ""
-            if(content!==""){
-                this.$router.replace({
-                    name: "Search",
-                    path:'/Search',
-                    params:{
-                        searchContent:content,
-                    }
-                })
-            }
-        },
+      systemName: "bok",
+      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+    }
+  },
+  computed: {
+    path() {
+      const _this = this
+      let res = _this.$store.getters['bok/getPath'].split("/")
+      res[0] = _this.systemName
+      return res
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    //
+    clickSearch() {
+      const _this = this
+      let content = _this.searchContent
+      _this.searchContent = ""
+      if (content !== "") {
+        this.$router.replace({
+          name: "Search",
+          path: '/Search',
+          params: {
+            searchContent: content,
+          }
+        })
+      }
     },
+    logout() {
+      this.$store.commit('logout');
+    }
+  },
 }
 </script>
 
@@ -67,34 +73,48 @@ export default {
 @import "../../style/variables";
 
 .navbar-wrapper {
-    height: 50px;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-    position: relative;
+  height: 50px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  position: relative;
 }
 
 .el-breadcrumb {
-    height: calc(100% - 30px);
-    padding: 15px;
-    font-size: 20px;
+  height: calc(100% - 30px);
+  padding: 15px;
+  font-size: 20px;
+}
+
+.user-wrap{
+  display: flex;
+  cursor: pointer;
+
+  .user-name{
+    margin-right: 16px;
+    padding-top: 18px;
+  }
+}
+
+.el-dropdown:hover{
+  cursor: pointer;
 }
 
 .el-avatar {
-    margin: 10px;
+  margin: 10px;
 }
 
 .el-avatar:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .el-input {
-    position: absolute;
-    top: 11px;
-    left: 25%;
-    //height: 50%;
-    width: 50%;
+  position: absolute;
+  top: 11px;
+  left: 25%;
+  //height: 50%;
+  width: 50%;
 }
 
 .input-with-select .el-input-group__prepend {
-    background-color: #fff;
+  background-color: #fff;
 }
 </style>

src/views/Bok/SideBar.vue

@@ -25,11 +25,11 @@
         <i class="el-icon-menu"></i>
         <template #title>知识点</template>
       </el-menu-item>
-      <el-menu-item index="knowledgeGraph">
+      <el-menu-item index="knowledgeGraph"  v-if="false">
         <i class="el-icon-connection"></i>
         <template #title>知识图谱</template>
       </el-menu-item>
-      <el-menu-item index="paper">
+      <el-menu-item index="paper"  v-if="false">
         <i class="el-icon-document"></i>
         <template #title>试卷袋</template>
       </el-menu-item>
@@ -37,7 +37,7 @@
         <i class="el-icon-circle-check"></i>
         <template #title>审核</template>
       </el-menu-item>
-      <el-menu-item index="setting">
+      <el-menu-item index="setting" v-if="false">
         <i class="el-icon-setting"></i>
         <template #title>设置</template>
       </el-menu-item>