先看一下实际登录效果图：

登录前：

登录后：

登录后其他页面：

---

使用说明：

1. 语言vue
2. UI库 vant
3. 数据管理 vuex

---

(1) 引入vant

import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);

vant 基本用法

---

(2) 封住vue 组件 m-header

view层

<template>
  <van-nav-bar
    class="m-header"
    fixed
    :title="title"
    :left-text="index ? '首页' : '返回'"
    @click-left="onClickLeft"
  >
    <div slot="right">
      <a
        class="login"
        :href="loginInfo.logoutUrl"
        v-if="loginInfo.isLogin"
      >退出</a>
      <img
        v-if="loginInfo.isLogin"
        class="user-head-img"
        :src="loginInfo.myAvatar"
      />
      <a
        class="login"
        :href="loginInfo.loginUrl"
        v-if="!loginInfo.isLogin"
      >登录</a>
    </div>
  </van-nav-bar>
</template>
<script>
import { NavBar } from "vant"
import _default, { mapState, mapActions } from "vuex"
export default {
  name: "m-header",
  props: {
    title: {
      type: String,
      default: ""
    },
    // 是否为首页
    index: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(["loginInfo"])
  },
  created() {
    this.getLoginInfo().then(() => {
      this.$emit("callback")
    })
  },
  methods: {
    ...mapActions(["getLoginInfo"]),
    //左侧返回 地址处理
    onClickLeft() {
      let navname = this.$route.name
      let url = ""
      switch (navname) {
        case "CurrentWorks":
        case "WorksManag":
        case "worksManag":
          url = "/"
          break
        case "work_detail":
          url =
            "/" +
            (this.$route.query.from ? this.$route.query.from : "currentWorks")
          break
        case "Upload":
        case "AuthorInfo":
          url = "/worksManag"
          break
        case "video_lists":
          url = "/currentWorks"
          break
        default:
          if (!this.index) {
            url = -1
          }
          break
      }
      //alert(url)
      if (url == "-1") {
        this.$router.go(url)
      } else {
        this.$router.push(url)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../../style/common.scss";
.m-header {
  height: rem(82);
  font-size: rem(30);
  line-height: rem(82);
  width: 100%;
  position: relative;
  background: rgba($color: #120804, $alpha: 0.9);
  z-index: 999;
  &:after {
    border-bottom: 1px solid #400708;
  }
  .user-head-img {
    width: rem(54);
    height: rem(54);
    border-radius: rem(27);
    float: right;
    margin-top: rem(12);
    margin-right: rem(12);
    // position: absolute;
    // right: rem(0);
    // top: rem(-66);
  }
  .login {
    color: #808080;
    // display: inline-block;
    // font-size: rem(30);
    line-height: rem(82);
    float: right;
  }
}
</style>

action层

BASE_URL 是公共地址

  // 获取登陆信息
  getLoginInfo({ commit }) {
    return new Promise(resolve => {
      http
        .post(BASE_URL + "", {
          task: "base"
        })
        .then(data => {
          commit("loginInfo", data ? data.result : {});
          resolve();
        });
    });
  },

mutation层

  loginInfo: (state, data) => {
    state.loginInfo = data;
  },

---

（3）使用组件

  <m-header:title="'首 页'" :index="true"/>

 <m-header :title="'上传作品'" />

 <m-header :index="true" :title="'本期作品'" />