vue 通过路由导航守卫控制访问权限

1.作用：防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。

2.实现代码

2.1在router/index.js中添加如下代码，

const router = new VueRouter({
  routes
})
// 挂载路由导航守卫，作用是防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。
router.beforeEach((to, from, next) => {
  // to将要访问的路径
  // from代表从哪个路径跳转而来
  // next 是一个函数，表示放行。
  // next() 直接放行 next('/login')强制跳转到登录页面
  if (to.path === '/login') return next()
  // 获取token
  const token = window.sessionStorage.getItem('token')
  // 判断token是否存在，若存在，直接放行；若不存在，强制跳转到登录页面
  if (!token) return next('/login')
  next()
})