update

src/components/layout/header.vue

 <template>
-  <div class="head-main">
-    <div class="color-bar"></div>
-    <div class="head-top-content">
-      <div class="max-width-content">
-        <div class="logo-box">
-          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/logo%20(1).png" @click="goPage('/')" />
+  <div>
+    <div class="head-main">
+      <div class="color-bar"></div>
+      <div class="head-top-content">
+        <div class="max-width-content">
+          <div class="logo-box">
+            <img
+              src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/logo%20(1).png"
+              @click="goPage('/')"
+            />
+          </div>
+          <div class="login">
+            <template v-if="Object.values(user).length">
+              <div class="login-name">
+                <span class="name">{{ user.realname || user.username }}</span>
+                <span @click="handleLogout">退出</span>
+              </div>
+            </template>
+            <template v-else>
+              <span @click="handleLogin">用户登录</span>
+              /
+              <span @click="handleRegister">注册</span>
+            </template>
+          </div>
         </div>
       </div>
+      <div class="head-nav-content max-width-content">
+        <ul :class="{ 'nav-item-box': true }">
+          <template v-for="(item, index) in navData">
+            <li>
+              <div :class="getNameActive(item)">
+                <router-link :to="item.path"> <div v-html="item.name"></div></router-link>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
     </div>
-    <div class="head-nav-content max-width-content">
-      <ul :class="{ 'nav-item-box': true }">
-        <template v-for="(item, index) in navData">
-          <li>
-            <div :class="getNameActive(item)">
-              <router-link :to="item.path"> <div v-html="item.name"></div></router-link>
-            </div>
-          </li>
-        </template>
-      </ul>
-    </div>
+    <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
   </div>
 </template>
 <script>
+import login from './login'
 export default {
+  components: {
+    login
+  },
   data() {
     return {
       navData: [
@@ -52,11 +75,74 @@ export default {
         }
       ],
       time: null,
-      isEn: false
+      isEn: false,
+      user: {},
+      isLogin: false,
+      options: {
+        baseUrl: webConf.url,
+        register: {
+          data: {
+            username: `ezijing-${new Date().getTime()}`
+          },
+          fields: ['account', 'code', 'password']
+        },
+        login: {
+          account: {
+            onSuccess: this.loginSuccess
+          },
+          phone: {
+            onSuccess: this.loginSuccess
+          }
+        }
+      }
     }
   },
   mounted() {},
   methods: {
+    reg() {
+      this.isLogin = false
+      this.$router.push({ path: '/register' })
+    },
+    closeMask(blo) {
+      this.isLogin = blo
+    },
+    handleLogin() {
+      this.passport.login()
+    },
+    handleRegister() {
+      this.passport.register()
+    },
+    handleLogout() {
+      this.passport.logout()
+      this.isLogin = false
+      window.G.UserInfo = {}
+      if (this.$route.path !== '/index') {
+        window.sessionStorage.userInfo = {}
+        this.user = {}
+        this.$router.push('/')
+      } else {
+        window.sessionStorage.userInfo = {}
+        this.user = {}
+        this.$router.go(0)
+      }
+    },
+    onReady(isLogin, user = {}) {
+      // this.isLogin = isLogin
+      this.user = user
+      window.G.UserInfo = user
+      window.sessionStorage.userInfo = JSON.stringify(user)
+    },
+    loginSuccess(data) {
+      this.passport.checkLoginStatus((isLogin, user = {}) => {
+        window.sessionStorage.userInfo = JSON.stringify(user)
+        this.isLogin = isLogin
+        this.user = user
+        // window.G.UserInfo = user
+        // this.$router.go(0)
+        this.$router.push('/my')
+        window.location.reload()
+      })
+    },
     goPage(path, goType) {
       if (parseInt(goType) === 3) {
         this.$message('暂未开通，敬请期待')
@@ -74,6 +160,9 @@ export default {
     }
   },
   computed: {
+    passport() {
+      return this.$refs.passport
+    },
     getNameActive() {
       return item => {
         const currentPath = this.$route.path
@@ -90,6 +179,13 @@ export default {
         }
       }
     }
+  },
+  watch: {
+    $route(route) {
+      if (route.query.register) {
+        this.handleRegister()
+      }
+    }
   }
 }
 </script>