面试题：Solid.js 中如何初步实现路由守卫的权限控制

Question

在 Solid.js 项目里，假设存在一个简单的用户登录状态管理，有普通用户和管理员两种角色。现在要对某些路由进行权限控制，比如只有管理员能访问 '/admin' 路由。请描述实现此路由守卫权限控制的大致步骤，并给出关键代码示例。

Answer 1

大致步骤

1. 安装路由库：在 Solid.js 项目中，通常使用 solid-router 来处理路由相关逻辑，先确保安装了该库。
2. 定义路由：在项目中定义所有路由，包括需要权限控制的 /admin 路由。
3. 创建状态管理：管理用户登录状态及角色信息。
4. 编写路由守卫函数：判断用户是否有权限访问特定路由。
5. 应用路由守卫：在路由配置中使用路由守卫。

关键代码示例

1. 安装依赖

npm install solid-router

2. 定义路由和状态管理

import { render } from 'solid-js/web';
import { Router, Routes, Route, navigate } from'solid-router';
import { createSignal } from'solid-js';

// 状态管理，模拟用户登录状态和角色
const [isLoggedIn, setIsLoggedIn] = createSignal(false);
const [userRole, setUserRole] = createSignal('');

// 模拟登录函数
const login = (role) => {
    setIsLoggedIn(true);
    setUserRole(role);
};

// 模拟登出函数
const logout = () => {
    setIsLoggedIn(false);
    setUserRole('');
    navigate('/');
};

3. 编写路由守卫函数

const adminGuard = () => {
    if (!isLoggedIn()) {
        navigate('/login');
        return false;
    }
    if (userRole()!== 'admin') {
        navigate('/');
        return false;
    }
    return true;
};

4. 应用路由守卫

render(() => (
    <Router>
        <Routes>
            <Route path="/" component={() => <div>Home</div>} />
            <Route path="/login" component={() => <div>Login <button onClick={() => login('admin')}>Login as Admin</button></div>} />
            <Route path="/admin" component={() => <div>Admin Page</div>} beforeEnter={adminGuard} />
        </Routes>
    </Router>
), document.getElementById('app'));

上述代码中，adminGuard 函数作为路由守卫，在访问 /admin 路由前进行权限检查。如果用户未登录或不是管理员角色，则重定向到相应页面。