vue登陆拦截功能

1、在/src/router/index.js文件内添加如下代码（在需要拦截的路由地址添加）

meta: {
     requireAuth: true, // 判断是否需要登录
}

2、在main.js下添加个路由跳转前的拦截方法

router.beforeEach((to, from, next) => {
	if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
		console.log('需要登录');
		if (localStorage.token) { // 判断当前的token是否存在 ； 登录存入的token
   			next();
  		}else {
  			next({
    		path: '/',
    		query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
   			})
  		}
	}else {
		next();
	}
});

此时拦截已配置好，可以正常拦截了

3、在登陆验证成功后将token存入localStorage中

 

4、退出登陆时移除localStorage中的token即可