66 导航守卫

我们来看看其他的模块，这个项目我们已经做得差不多了，然后订单管理我们就不做了，因为订单管理2,3状态正常渲染就可以了，接下来我们来看一下，拦截的问题，vue的导航守卫-拦截，具体如何操作呢？比如说，我们已经登录状态，我可以进入到地址管理，虽然我没有地址，但是我可以进去，如果说我是一个未登录状态，我点击地址管理，他会报一个错误，我们该如何处理？

首先，他会跳转到'/login',原因是我们在API里面有封装，如果未登录，他就会跳转到'/login',他此时是已经进去了，发现app.user没有，才跳转到登录页面，其实我们是不能让他进去的，所以此时我们要做导航拦截。

解决报错到 src/router/index.js 文件中添加如下代码

const originalPush = Router.prototype.push
const originalReplace = Router.prototype.replace

// push
Router.prototype.push = function push (location,onResolve,onReject) {
	if (onResolve || onReject) return originalPush.call(this,location, onResolve,onReject)
	return originalPush.call(this,location).catch(err => err)
}

// replace
Router.prototype.replace = function push(location,onResolve,onReject) {
	if (onResolve || onReject) return originalReplace.call(this,location,onResolve,onReject)
	return originalReplace.call(this,location).catch(err => err)
}


自己的
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace

// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
	if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
	return originalPush.call(this, location).catch(err => err)
}

// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
	if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
	return originalReplace.call(this, location).catch(err => err)
}

导航守卫 实现代码如下

1, src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace

// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
	if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
	return originalPush.call(this, location).catch(err => err)
}

// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
	if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
	return originalReplace.call(this, location).catch(err => err)
}

Vue.use(VueRouter);


const routes = [{
		path: "/home",
		name: "Home",
		component: Home,
	},
	{
		path: "/",
		redirect: "/home", // 重定向
	}, {
		path: "/list",
		name: "List",
		component: () =>
			import("../views/List.vue"),
	}, {
		path: "/cart",
		name: "Cart",
		meta: {
			keepAlive: true, // 此组件需要被缓存
		},
		component: () =>
			import("../views/Cart.vue"),
	}, {
		path: "/my",
		name: "My",
		component: () =>
			import("../views/My.vue"),
	},
	{
		path: "/search",
		children: [{
			path: "/",
			name: "index",
			component: () =>
				import("../views/search/Search-index.vue"),
		}, {
			path: "/search/list",
			name: "Search-list",
			component: () =>
				import("../views/search/Search-list.vue"),
		}],
		component: () =>
			import("../views/Search.vue"),
	},
	{
		path: "/detail",
		name: "Detail",
		meta: {
			keepAlive: true, // 此组件需要被缓存
		},
		component: () =>
			import("../views/Detail.vue"),
	},
	{
		path: "/login",
		name: "Login",
		component: () =>
			import("../views/login/Login.vue"),
	},
	{
		path: "/userLogin",
		name: "UserLogin",
		component: () =>
			import("../views/login/UserLogin.vue"),
	},
	{
		path: "/register",
		name: "Register",
		component: () =>
			import("../views/login/Register.vue"),
	},
	{
		path: "/recovery",
		children: [{
			path: "/",
			name: "RecoveryIndex",
			component: () =>
				import("../views/recovery/RecoveryIndex.vue"),
		}, {
			path: "/recovery/btn",
			name: "RecoveryBtn",
			component: () =>
				import("../views/recovery/RecoveryBtn.vue"),
		}],
		component: () =>
			import("../views/recovery/Recovery.vue"),
	},
	{
		path: "/path",
		children: [{
			path: "/",
			name: "Path-Index",
			component: () =>
				import("../views/path/Path-Index.vue"),
		}, {
			path: "/path/path-list",
			name: "Path-List",
			component: () =>
				import("../views/path/Path-List.vue"),
		}, {
			path: "/path/path-province-city",
			name: "Path-Province-City",
			component: () =>
				import("../views/path/Path-Province-City_bak.vue"),
		}, {
			path: "/path/path-address",
			name: "Path-Address",
			component: () =>
				import("../views/path/Path-Address_bak.vue"),
		}],
		component: () =>
			import("../views/Path.vue"),
	},
	{
		path: "/order",
		name: "Order",
		meta: {
			keepAlive: true, // 此组件需要被缓存
		},
		component: () =>
			import("../views/Order.vue"),
	},
	{
		path: "/payment",
		name: "Payment",
		component: () =>
			import("../views/Payment.vue"),
	}
];

const router = new VueRouter({
	mode: "history",
	base: process.env.BASE_URL,
	routes,
});

// 拦截需要验证页面必须为登录状态才可以进入
router beforeEach((to, from, next) => {
	// 哪些页面需要验证在此加入即可
	let nextRoute = ['Payment', 'Cart', 'Path', 'Order', 'Path-Index', 'Path-List'];

	// 判断 是否为登录中
	let userInfo = JSON.parse(localStorage.getItem('teaUserInfo'));

	// 当前进入的页面，是不是需要验证的哪些页面
	if (nextRoute.indexOf(to.name) >= 0) {
		// 验证是否为登录状态
		if (!userInfo) {
			// 跳转到登录页面
			router.push('/login');
		}
	}

	next();

	// console.log(to, from, next);
})

export default router;