name: 'deploy-manage',
component: () => import('@/views/sys-admin/deploy-manage/deploy-manage.vue'),
meta: {
permitName: 'deploy-manage',
}
},
// ...
];
2、用户登录
用户进入登录页，输入用户名、密码、验证码，点击登录，发送登录请求，登录成功之后，将 token 保存在 sessionStorage，然后跳转到首页 /home ，进入路由拦截的逻辑。
/* login.vue */
// 发送登录请求
vm.$http.login(params, data => {
sessionStorage.token = data.token;
// ... // 跳转到首页 home。这里会触发全局路由拦截 router.beforeEach
vm.$router.push({ name: 'home' });
}, err => {
console.log(err);
});
3、全局路由拦截
首先从打开本地服务 http://localhost:2001 开始，打开后会进入 login 页面，那么判断的依据是什么？
首先是 token。没有登录的用户是拿不到 token 的，而登录后的用户我们会将 token 存到 seesionStorage，因此，根据当前有没有 token 即可知道是否登录。
/* 全局路由拦截 */
router.beforeEach((to, from, next) => {
// 根据有没有token判断是否登录
if (!sessionStorage.token) {
// 1、当用户打开localhost，to.matched === []，匹配的是空路由，此时需要重定向到login
// 2、重定向到login之后，to.matched === [name: "login", path: "/login"...] 就是上一步的login页面
// to.matched.some(item => item.meta.requiresAuth) 这句的意思是 进入的路由页需要登录认证，取反就是不用登录，直接通过
if (to.matched.length > 0 && !to.matched.some(item => item.meta.requiresAuth)) {
next(); // 跳过，进入下一个导航钩子。比如：在 /login 路由页刷新页面会走到此逻辑
} else {
next({ path: '/login' });
}
} else {
// 现在有token了
if (!store.state.permission.permissionList) {
// 如果没有 permissionList，发请求获取用户权限列表
store.dispatch('permission/FETCH_PERMISSION').then(() => {
next({ path: to.path, query: to.query });
});
} else {
// 现在有 permissionList 了
if (to.path !== '/login') {
if (to.matched.length === 0) {
// 如果匹配到的路由形如 https://172.24.1.117/?id=xxx&name=xxx，表明是关联跳转时没有权限，跳转到403
next({ path: '/403' });
} else if (queryChange) {
// 跳转之前将路由中查询字符串为空的过滤掉，如 xxx.com?page=&size= 这种
next({ name: to.name, params: to.params, query: to.query });
} else if (sessionStorage.isSysLock === 'true' && to.path !== '/sys-lock') {
