Vue项目中设置全局路由导航守卫

在Vue项目中国，我们一般会设置一个路由导航守卫，为防止用户未登录直接从地址栏输入地址访问网站其他页面。其中路由导航守卫使用Vue-router提供的方法来实现。

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

1.在路由的js文件导入VUE路由对象并挂载

 

import Router from 'vue-router'
Vue.use(Router)

 

2.创建路由实例

 

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

 

3.挂载路由导航守卫

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转

  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})