Vue:前置路由守卫 与 （个人版）：简易路由

业务情景：为了避免客户因为忘了加入购物车，又点击了购买商品结算时才提醒客户需要登录。让客户需要重新找一次这种减少用户体验的事情发生。我们可以提前判断用户是否已经登录，即用户的token是否存在。一旦没有，就让路由守卫去拦截请求并跳转到登录界面：
上代码：// 前置路由守卫（路由导航）
router.beforeEach((to, from, next) => {
// 想要进入购物车页面，必须有token
// console.log(‘to:’, to)
// console.log(‘from:’, from)
let token = localStorage.getItem(‘token’)
if (to.path == ‘/home’) {
// 此时必须要有token
if (token) {
next(); // 这个next只针对去往/cart的
} else {
Vue.prototype.KaTeX parse error: Expected 'EOF', got '}' at position 127: …1000); }̲ return…router.push(’/page’)
let token = localStorage.getItem(“token”);
console.log(token);
if(token){
this.KaTeX parse error: Expected 'EOF', got '}' at position 32: …me') }̲else{ …toast(“请先登录”)
setTimeout(() => {
this.$router.push("/login");
}, 1000);
}
}
我简单解释下：就是先做个漂亮登录界面（让UI设计师去），里面就只有一个按钮。这个按钮就做上面这个事件。
这样就能让已经有token缓存的用户，不需要在输入账号和密码了

当然，这只是我业务需要这样而已，前置路由守卫也可以做，而且更简便，还不需要再写多一个页面。只需要在router.js 做个判断，将首先进入登录页的进行条件判断：有无token，有直接登录进入首页，无进入登录页