Vue_导航守卫，退出功能

---

我不用登录，我直接在url输入/home也可以跳转到我的home页面，这不符合我所要实现的功能，也不符合逻辑

一、导航守卫

导航守卫是由vue-router 提供的，主要用来通过跳转或取消的方式守卫导航

1.使用方法

我们可以使用在"router/index.js"中用 router.beforeEach 注册一个全局前置守卫：

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 是将要访问的路径
// from 代表从哪个路径跳转过来
// next 是一个函数，表示放行 next()放行 next('/login')强制跳转
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  // 如果tokenStr字符串不存在 则强制跳转到login页面
  if (!tokenStr) return next('/login')
  next()
})

2.实现效果

可以看到他已经不能通过url直接链接到home地址进行跳转,当我们强制使用url进行跳转时他会给我们跳回login界面

二、退出功能的实现

要实现退出功能其实很简单，我们只需要在”home“界面中添加一个清除本地token的按钮就行了

<template>
  <div id="app">
    <!-- 退出按钮 -->
    <el-button type="info" @click="logout">退出</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    logout () {
      // 要实现退出功能只需要做到清除本地的token就行了
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang='less' scop>
</style>