面试题：Svelte路由系统优化之导航守卫实现

Question

在Svelte路由系统中，要求实现一个导航守卫功能，当用户访问某个特定路由（比如 `/admin`）时，先检查用户是否具有管理员权限（假设通过 `checkAdminPermission()` 函数返回布尔值判断），如果没有权限则跳转到 `/login` 页面。请详细说明实现思路并给出关键代码片段。

Answer 1

实现思路

1. 在Svelte路由系统中，可以利用路由的相关钩子函数来实现导航守卫。
2. 当路由即将导航到某个路径时，特别是 /admin 路径，调用 checkAdminPermission() 函数检查权限。
3. 根据检查结果决定是否允许导航，若没有权限则重定向到 /login。

关键代码片段

假设使用 svelte - routing 库：

<script>
    import { Router, Route, navigate } from'svelte - routing';
    function checkAdminPermission() {
        // 这里模拟权限检查逻辑，实际应用中应与后端交互验证
        return true; // 或者返回实际的权限检查结果
    }
    const beforeNavigate = (to, from) => {
        if (to.path === '/admin') {
            if (!checkAdminPermission()) {
                navigate('/login');
                return false;
            }
        }
        return true;
    };
</script>

<Router beforeNavigate={beforeNavigate}>
    <Route path="/admin">
        <!-- 管理员页面内容 -->
    </Route>
    <Route path="/login">
        <!-- 登录页面内容 -->
    </Route>
</Router>

在上述代码中：

1. beforeNavigate 函数作为 Router 组件的 beforeNavigate 属性传入，它会在每次路由导航前被调用。
2. 在 beforeNavigate 函数内部，当检测到目标路由是 /admin 且用户没有管理员权限时，调用 navigate('/login') 进行重定向，并返回 false 阻止导航到 /admin。如果有权限或不是导航到 /admin，则返回 true 允许正常导航。