面试题：Vue项目中全局前置路由守卫的常见使用场景有哪些

全局前置路由守卫应用场景及实现思路

登录验证场景
- 应用场景：确保只有登录用户才能访问特定页面，如用户个人中心、订单管理等页面。未登录用户访问这些页面时，自动重定向到登录页面。
- 实现思路：在全局前置路由守卫router.beforeEach中，检查本地存储（如localStorage）或 Vuex 中是否存在用户登录状态（如登录令牌）。若存在，则允许进入目标路由；若不存在，则使用next('/login')重定向到登录页面。示例代码如下：

router.beforeEach((to, from, next) => {
    const isLoggedIn = localStorage.getItem('token');
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (isLoggedIn) {
            next();
        } else {
            next('/login');
        }
    } else {
        next();
    }
});

权限控制场景
- 应用场景：不同角色的用户拥有不同的访问权限，例如管理员可以访问所有页面，普通用户只能访问部分页面。
- 实现思路：在路由配置中，为需要权限控制的路由添加meta字段，如meta: { roles: ['admin'] }。在全局前置路由守卫中，获取当前用户角色，判断用户角色是否在目标路由允许的角色列表中。如果匹配，则允许通过；否则，重定向到无权限提示页面或其他合适页面。示例代码如下：

router.beforeEach((to, from, next) => {
    const userRole = localStorage.getItem('role');
    if (to.matched.some(record => record.meta.roles)) {
        if (to.meta.roles.includes(userRole)) {
            next();
        } else {
            next('/no - permission');
        }
    } else {
        next();
    }
});

页面加载前数据预处理场景
- 应用场景：在进入某些页面之前，需要提前加载一些必要的数据，如用户信息、系统配置等，以保证页面能正常渲染。
- 实现思路：在全局前置路由守卫中，判断目标路由是否需要进行数据预处理。如果需要，则发起异步请求获取数据，待数据获取完成后，再调用next()进入目标路由。例如：

import axios from 'axios';
router.beforeEach(async (to, from, next) => {
    if (to.matched.some(record => record.meta.needPreload)) {
        try {
            const response = await axios.get('/api/userInfo');
            // 将获取的数据存储到 Vuex 或其他合适地方
            next();
        } catch (error) {
            // 处理数据获取失败情况
            next('/error - page');
        }
    } else {
        next();
    }
});

星途面试题库

面试题：Vue项目中全局前置路由守卫的常见使用场景有哪些

知识考点

面试题答案

全局前置路由守卫应用场景及实现思路