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

利用路由的全局前置守卫beforeEach来控制用户的访问权限。

首先是一个登录的页面

用户输入完整的信息，点击登录时，会本地存储用户的登录状态，如果在本地存储中存在用户登录过的痕迹，用户可以直接进入home页面，否则就要重新进入登录页面。

//vue路由导航守卫控制访问权限
//如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面
router.beforeEach((to,from,next)=>{
  // to 将要访问的路径
  //from 代表从那个路径跳转而来
  // next 是一个函数，表示放行
  // next() 放行 next('/login') 强制跳转
  if(to.path === '/login') return next();
  const userInfo  = JSON.parse(localStorage.getItem('userinfo'));
  if(!userInfo) return next('/login');
  next()
})