增加退出功能

1). 添加退出功能

打开 src/store/index.js 文件，在 actions 添加退出事件 logout：

src/store/index.js

const actions = {
  login({ commit }, user) {
    if (user) commit('UPDATE_USER', user)
    commit('UPDATE_AUTH', true)
    router.push('/')
  },
  logout({ commit }) {
    commit('UPDATE_AUTH', false)
    router.push({ name: 'Home', params: { logout: true } })
  }
}

退出的时候，我们将 auth 状态更改为未登录，并跳转到首页。在路由 push 方法的第一个参数使用对象，可以添加更多的配置。我们这里指定跳转目标的名称为 Home，对应 src/router/index.js 下 name 为 Home的路由。同时，我们传了一个 logout 参数，当首页获取到该参数时，就显示一个操作成功的提示。

 

2). 绑定退出事件

1、打开 src/components/layouts/TheEntry.vue 文件，添加退出方法 logout（注释部分是涉及的修改）:

src/components/layouts/TheEntry.vue

<script>
import { mapState } from 'vuex'

export default {
  name: 'TheEntry',
  computed: {
    ...mapState([
      'auth',
      'user'
    ])
  },
  // 添加 methods 选项，并添加 logout 方法
  methods: {
    logout() {
      this.$store.dispatch('logout')
    }
  }
}
</script>

点击退出后，我们通过调用 this.$store.dispatch('logout') 来完成退出。

2、查找 <ul class="dropdown-menu">，在退出链接上添加 @click="logout"：

src/components/layouts/TheEntry.vue

<ul class="dropdown-menu">
  <li><a href="javascript:;" @click="logout"><i class="fa fa-sign-out text-md"></i>退出</a></li>
</ul>

3). 添加退出成功提示

打开 src/views/Home.vue 文件，复制以下代码替换原 <script>：

src/views/Home.vue

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: '', // 消息
      msgType: '', // 消息类型
      msgShow: false // 是否显示消息，默认不显示
    }
  },
  beforeRouteEnter(to, from, next) {
    const fromName = from.name
    const logout = to.params.logout

    next(vm => {
      if (vm.$store.state.auth) {
        switch (fromName) {
          case 'Register':
            vm.showMsg('注册成功')
            break
        }
      } else if (logout) {
        vm.showMsg('操作成功')
      }
    })
  },
  computed: {
    auth() {
      return this.$store.state.auth
    }
  },
  watch: {
    auth(value) {
      if (!value) {
        this.showMsg('操作成功')
      }
    }
  },
  methods: {
    showMsg(msg, type = 'success') {
      this.msg = msg
      this.msgType = type
      this.msgShow = true
    }
  }
}
</script>

我们这里需要处理退出的两种情况。

从其他页面退出时，我们通过路由参数 logout 来判断是否显示提示：

beforeRouteEnter(to, from, next) {
  const fromName = from.name
  // 获取 logout 参数
  const logout = to.params.logout

  next(vm => {
    if (vm.$store.state.auth) {
      switch (fromName) {
        case 'Register':
          vm.showMsg('注册成功')
          break
      }
    } else if (logout) {
      // logout 返回 true 时，显示操作成功提示
      vm.showMsg('操作成功')
    }
  })
}

从首页退出时，路由未改变，beforeRouteEnter 不会被调用，我们通过侦听 auth 来判断是否显示提示：

computed: {
  // 用户登录状态
  auth() {
    return this.$store.state.auth
  }
},
watch: {
  // 监听 auth，它的值变为 false 时，显示操作成功提示
  auth(value) {
    if (!value) {
      this.showMsg('操作成功')
    }
  }
},