一、什么是路由守卫

粗浅的来说，路由守卫就是，在你项目中路由发生变化的时候，会触发的东西。使用时，它会有三个参数给你返回：to、from、next。字面上我们就可以大概猜到这三个参数的含义，到哪去、从哪来，前进。

二、处理登录逻辑

路由守卫有全局的、有路由独享守卫、有页面中的像生命周期一样的守卫。这里我只举例第一种守卫，让大家简单了解下路由守卫。

在我的实际开发中，我常用路由守卫去处理登录的逻辑，当我们全局挂载路由守卫的时候，如果根据token的存在去作为判断，可以完成大多数的login登录逻辑：

import Vue from 'vue';
import Router from '@/plugin/uni-simple-router/index.js';Vue.use(Router);
//初始化
const router = new Router({...
});const whiteList = ['/pages/login/login'];
//全局路由前置守卫
router.beforeEach((to, from, next) => {// 这里我通过storage拿token，因为我的逻辑是登录的时候存token到storage// 当然在大多数应用场景，我们可以放在store中// 在uniapp场景中，则可以考虑存放在storage中let token = uni.getStorageSync('Access-Token');// 路由守卫在路由将要发生改变时触发，这时如果存在token，就让路由往下执行if (token) {next();} else {// 如果没token则是未登录状态，我们可以做相应的逻辑处理if (whiteList.indexOf(to.path) !== -1) {next();} else {next({path: '/pages/login/login'});};};
});
// 全局路由后置守卫
router.afterEach((to, from) => {console.log("afterEach");
});
export default router;