使用路由导航守卫控制页面访问权限

需求：在点击登录之前，除了A页面能够访问，其余均不可访问

App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/A"><button>A</button> </router-link> |
      <router-link to="/B"><button>B</button></router-link>|
      <router-link to="/C"><button>C</button></router-link>
    </nav>
      <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

A、B、C组件

 

//A组件
<template>
  <div class="home">
    <h1>This is an A page</h1>
    <button @click="add_token">点我登录，添加token</button>
  </div>
</template>

<script>
export default {
  name: "A",
  created() {},
  destroyed() {},
  methods: {
    add_token() {
      window.sessionStorage.setItem("token", "12201807009");
      // const token = window.sessionStorage.getItem("token");
      // console.log(token);
    },
  },
};
</script>

//B组件
<template>
  <div class="about">
    <h1>This is an B page</h1>
  </div>
</template>
//C组件
<template>
  <div class="about">
    <h1>This is an C page</h1>
  </div>
</template>

 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import A from '../views/A.vue'
import B from '../views/B.vue'
import C from '../views/C.vue'

Vue.use(VueRouter)

const routes = [
  // {
  //   path:'/',
  //   redirect: '/A'
  // },
  {
    path: '/A',
    name: 'A',
    component: A
  },
  {
    path: '/B',
    name: 'B',
    component: B
  },
  {
    path: '/C',
    name: 'C',
    component: C
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to,from,next)=>{
  //to将要访问的路径
  //from 从哪个路径跳转而来
  //next()放行   next('/login') 强制跳转

  //获取token 判断是否有
  if (to.path ==='/A') return next()
  const token = window.sessionStorage.getItem('token')
  console.log(token);
  if(!token) return next('/A')
  next()
})
export default router

点击后会在sessionStorage内保存token

 

此后点击B、C就可以访问了