vue切换路由是否需要登录判断

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各种请求已经发出。

我们可以在入口文件man.js里面进行配置，使用router.beforeEach方法，不懂得可以打印to，from的参数就ok，requireAuth可以随意换名的，只要man.js里面跟配置路由的routes里面的字段保持一致：

import router from './router'
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    if(!sessionStorage.getItem('token') && !localStorage.getItem('token')){
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }else{
    	 next();
    }
  }else {
    next();
  }
});
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

export default new Router({
	routes: [
		{
			path: '/',
			name: 'home',
			redirect: '/home'
		},
		{
			path: '/home',
			component: Home,
			meta: {
		      title: '',
		      requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
		   }
		},
		{
			path:'/login',
			name:'login',
			component:Login
		},
		{
			path:'/register',
			name:'register',
			component:Register
		}
	]
})