next({ path: '/sys-lock' });
} else {
next();
}
} else {
// 1.如果用户手动在地址栏输入 /login，重定向到之前的路由页
// next(from.fullPath);
// 2.如果用户手动在地址栏输入 /login，清除token并刷新页面，就会去到登录页
store.commit('goToLogin');
}
}
}
});
（1）当用户打开 localhost，此时还没有 token，匹配的是空路由，我们重定向到登录页 next({ path: ‘/login’ });
（2）用户在登录页刷新页面，也会进入路由拦截，此时匹配的是 login 路由，而 login 路由是不需要登录验证的（requiresAuth 为空或者 false），所以直接跳过执行 next();
（3）用户在登录页输入了用户名和密码，登录成功，保存了 token，跳转到 /home 路由；
（4）此时进入路由拦截，已经有 token了，但是还没有用户权限 permissionList，然后发请求获取用户权限列表，得到权限后 next({ path: to.path, query: to.query }); 继续往下走；
（5）再次进入路由拦截，此时有 token 和 permissionList 了，就可以根据实际业务进行跳转了。上面的代码是判断当前是不是 login 路由，如果用户登录后手动在地址栏输入 /login，则清除 token 跳转到登录页。其他的逻辑就跟具体业务相关了，就不细讲了。
4、处理用户权限
处理用户权限，在 store.js 定义一个模块 permission.js，专门用于处理用户权限相关的逻辑，用户权限列表、菜单列表都保存在此模块；
来看看 permission.js 主要做了什么：
/* permission.js */
/* 由于权限这块逻辑很多，所以在vuex添加了一个permission模块来处理权限相关的逻辑和变量 */
import httpRequest from '@/assets/js/service/http'; // http请求
import handleModule from '@/assets/js/common/handle-module'; // 处理路由、侧边栏的公共函数
import router, { dynamicRoutes } from '@/router/index'; // 默认路由配置，动态路由配置
import permissionRouter from '@/router/router'; // 需要权限的路由配置
// ...
export default {
// ...
actions: {
async FETCH_PERMISSION({ commit, state }) {
// 初始化路由表，注意这里必须写，router.beforeEach 路由拦截时，多次执行 FETCH_PERMISSION
commit('setPermission', []); // 发请求获取后端返回的用户权限
let data = await getUserByToken();
let userPopedoms = data.userPopedoms || [];
// 保存用户的权限模块（去除掉用户管理和登录），用户管理模块可以使用，权限列表
let userPopeList = userPopedoms.filter(v => v.requestMapping !== 'user-manage' && v.requestMapping !== 'login');
commit('setUserPopedoms', userPopeList);
