Vue-router(5)之 路由導航守衛
阿新 • • 發佈:2018-11-24
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. 掛載路由 })