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. 掛載路由
})