Question

我理解这里提供的示例

https://github.com/ReactTraining/react-router/blob/master/examples/auth-flow/app.js

但我认为这只回答了身份验证而非授权的问题。用户通过身份验证后，或者不仅仅取决于该位置是否存在值，本地存储中应该有一个jwt令牌。

 loggedIn() {
   return !!localStorage.token
 }

我知道不可能进行任何服务器通信，但我所追求的是完全隐藏登录后的应用程序。我不知道如何在SPA中实现这一点，我应该将我的身份验证和我的应用程序的其余部分拆分为2页吗？如果我带来角色怎么办？

Answer 1

只需通过props将用户角色传递给组件，然后执行简单检查以确定是否应允许用户访问此页面。否则重定向（可能是404页）。

const UserPage = ({userType}) => {    
    if(userType.role == 'user' || userType.role == 'admin') {
        return (
            <div>Basic Page Accessed</div>
        )
    } else {
        // Redirect
    }
}

const AdminPage = ({userType}) => {    
    if(userType.role == 'admin') {
        return (
            <div>Page Accessed</div>
        )
    } else {
        // Redirect
    }
}

当然这根本不是安全的，因为一切都发生在客户端，没有什么可以阻止恶意/精明的用户解雇他们不应该做的动作。这就是为什么你还需要在你的后端使用身份验证/授权。因此，您可以将我的示例视为更好的UI功能，而不是实际的安全功能。您也可以使用this库进行前端授权，但对我来说似乎有点太多了。简单的解决方案应该可以解决问题。

然后问题变成API的授权/认证之一，得到了很好的回答here。

当然这种方法实际上只能保护您的数据，而不是实际的应用程序，但我想这对大多数应用程序来说已经足够了。如果您确实需要完全阻止对不同页面的访问，那么我认为React或其他一些SPA框架可能不是该项目的最佳选择。

使用反应路由器的SPA授权

1 个答案: