头像模块

src/components/Header.vue

@@ -4,17 +4,24 @@
     <el-image :src="banner" style="width: 100%; height: auto;"/>
 
     <!-- 用户信息 -->
-    <div class="user-info">   
+    <div class="user-info" v-if="isLogin">
       <el-dropdown class="user-info-dropdown" trigger="hover">
         <span class="el-dropdown-link"><img :src="userAvatar" /></span>  
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>userName</el-dropdown-item>     <!-- 用户名 -->
+          <el-dropdown-item>{{userName}}</el-dropdown-item>     <!-- 用户名 -->
           <!-- <el-dropdown-item>{{ userName }}</el-dropdown-item>  -->    
           <el-dropdown-item divided @click.native="logout()">退出登录</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
 
+  <div class="user-info" v-if="!isLogin">
+    <a style="color: white; cursor: pointer" @click="toLogin()">登录</a>
+    <a style="color: white;"> / </a>
+    <a style="color: white;cursor: pointer" @click="toRes()">注册</a>
+
+  </div>
+
   <!--导航栏-->
   <!--TODO: 需要根据设定动态更改-->
   <el-menu :default-active="activeIndex" class="nav" mode="horizontal" @select="handleSelect">
@@ -44,6 +51,7 @@
 import pageUtils from "../utils/pageUtils";
 import {Message} from "element-ui";
 
+
 export default {
   name: "Header",
 
@@ -57,6 +65,7 @@ export default {
       userPass: "",
       userAvatar: "",     /* 用户头像 */
       rankIf: true,       /* 权限识别 */
+      isLogin: false // 是否登录
     };
   },
 
@@ -109,10 +118,11 @@ export default {
         type: "warning",
       })
         .then(() => {
-          sessionStorage.removeItem("name");
-          sessionStorage.removeItem("pass");
-          sessionStorage.removeItem("rank");
-          this.$router.push("/login");
+          localStorage.removeItem("systemToken");
+          localStorage.removeItem("username");
+          localStorage.removeItem("userId");
+          localStorage.removeItem("role");
+          pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/login") //跳转至主页
         })
         .catch(() => {});
     },
@@ -171,9 +181,32 @@ export default {
       let userId = localStorage.getItem("userId")
       if (userId != null && token != null && userId !== '' && token !== '') {
         // 获取用户信息
+        var user = {
+          userId
+        }
+        this.$api.getUserDataByUserId(user).then((res) =>{
+          console.log(res)
+          if (res.status == 0) {
+            // 查询成功
+            this.userAvatar = res.data.userDetails.profilePhoto
+            this.userName = res.data.user.name
+            this.isLogin = true
+          }else {
+            Message.warning("登录失败，请重新登录")
+          }
+        }).catch(function (res){
+          console.log(res)
+        })
       }
       console.log(token)
       console.log(userId)
+    },
+    toLogin(){
+      pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/login")
+
+    },
+    toRes(){
+      pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/register")
     }
   },
 
@@ -182,9 +215,9 @@ export default {
     this.initPage();
 
     //登录相关处理
-      this.userName = sessionStorage.getItem("name");
+
       this.userPass = sessionStorage.getItem("pass");
-      this.userAvatar = require("@/assets/logo/user.jpg");     
+
       /* var userRank = sessionStorage.getItem("rank");
       if (userRank == 1) {
         this.rankIf = true;

src/utils/http/interface.js

@@ -55,6 +55,17 @@ export const register = data => {
     })
 };
 
+export const getUserDataByUserId = data => {
+    return axios({
+        headers:{
+            "Authorization": localStorage.getItem("systemToken")
+        },
+        url: '/user/getUserVoByUserId',
+        method: 'post',
+        data
+    })
+};
+
 
 export const chatContentUpdate = data => {
     return axios({
@@ -88,5 +99,6 @@ export default {
     login,
     register,
     chatContentUpdate,
-    homeContentUpdate
+    homeContentUpdate,
+    getUserDataByUserId
 }