Vue-router（5）之 路由导航守卫

app.vue

<template>
  <div>
    <h1>App根组件---路由导航守卫</h1>

    <!-- 路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

Login.vue

<template>
  <div>
    <p>姓名：<input type="text" v-model="username"></p>
    <p>密码：<input type="text" v-model="password"></p>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 登录失败，清除 所有 sessionStorage 中的数据
      if (this.username.length <= 0 || this.password.length <= 0) {
        window.sessionStorage.clear()
        return alert('登录失败')
      }
      window.sessionStorage.setItem('token', 'UIYUYyTRFTYRDTRDYGIHIIyTTDRRDYUHI')
      alert('登录成功')
    }
  }
}
</script>

Home.vue

<template>
  <div>
    <h2>后台主页 - 不登录不允许访问！！！</h2>
  </div>
</template>

<style scoped>
h2 {
  color: red;
}
</style>

index.js

import Vue from 'vue'
// 1. 导入和安装
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Login from './Login.vue'
import Home from './Home.vue'

// 2. 创建路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
})

// 为路由对象，添加 导航守卫：
// beforeEach 方法，会在每个路由规则，被匹配之前，做一件事情
router.beforeEach((to, from, next) => {
  // to 这个对象，表示将要访问的那个路由对象
  // from 表示，从哪个路由对象，跳转而来
  // console.log(to)
  // console.log(from)
  // next 代表放行
  // next()

  if (to.path === '/login') return next()
  // 否则 从 sessionStorage 中获取 token 字符串
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有登录，强制跳转到 登录页
  if (!tokenStr) return next('/login')
  // 已经登录，直接放行
  next()
})

import App from './app.vue'
const vm = new Vue({
  el: '#app',
  render: c => c(App),
  router // 3. 挂载路由
})