首页 文章

使用反应路由器的SPA授权

提问于
浏览 次
0

跟进这个问题：React Router Authorization

我理解这里提供的示例

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

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

loggedIn() {
   return !!localStorage.token
 }

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

reactjs redux react-router

1 回答

  • 0

    只需通过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框架可能不是最好的项目 .

    回复于

相关问题