vue 2.x防止用户手动修改url

项目测试过程中发现,用户手动修改url后可以跳过本页面校验直接进入到下一个页面,刚好看到vue-router的全局前置守卫,用一下试试. 直接上代码,为自己注释一波

router.beforeEach((to, from, next) => {   //vue-router的全局前置守卫
	if (from.path !== '/') {  // vue-router中from是 / 一般是其他页面或者初次进入,所以不进行拦截
		if (store.getters.getIsLicit) {   //页面跳转是否合法
			next();     //代码跳转,放行
		} else {
			alert('非法操作!!!');
			next(false);      //非法操作时,进行提示,页面不进行跳转
		}
	} else {
		next();   //第一次进入 直接放行
	}
});

思路是这样的,from 的path非/ 的情况,都要进行拦截判断,在vuex中定义一个状态用来管理页面的跳转是否合法的字段,在每个页面的created() 周期中 将该值设为非法值,在代码中将要发生页面跳转之前将该值修改为合法值,当跳转动作是非法的情况,使用next(false) 阻止页面跳转.