SPAの承認は、ルータ

Question

は、この質問のフォローアップの反応：React Router Authorization

私は例がここ

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の認証/認証の1つになります。hereもちろん

このアプローチは、実際には、あなたのデータはなく実際のアプリケーションを固定しているが、私はそれは、ほとんどのアプリケーションのための十分だと思います。あなたが実際に別のページへのアクセスを完全にブロックする必要がある場合は、Reactや他のSPAフレームワークがプロジェクトにとって最適でないかもしれないと思います。