VUEフロントエンドログイン

エントリー方法

　　ユーザのログオントークン、背景からメニューデータを取得する1

　　図2に示すように、トークンとのsessionStorageにメニューデータ、トークンは、ユーザがログインしたかどうかを確認するために使用され

　　図2に示すように、対応するリターンメニューリストを生成するメニューデータのフロントエンド

　　図3に示すように、処理ページとサブページのアクセス許可は、各サブメニュー制御に対応します

ユーザーが同じではありませんが、そうでない場合は、セッションの期限が切れていると文句を言うでしょう説明し、最後はログインページに返されたセッションIDの上にバックステージパスを動作するかどうかであろう

ここでは、二つの方法、バックグラウンドチェックがトークンになりますrequestHeaderの内側にトークンベルトインタフェース1の各アクセスがあり、セッションの有効期限が切れチェックすることができます。

ユーザーのログがバックアップした後に第二には、JSESSIONIDは、ユーザーの下にそれを持って来るためにすべての要求の後、ブラウザで直接生成されました。

これは、提供される登録の第2の実施形態では、コンフィギュレーションを設定する要求受付必要である config.withCredentialsが= trueに、対応する背景も必要応答ヘッダを設定します

api.interceptors.request.use（設定=> { 
  loadingInstance = Loading.service（loadingOptions）
  のsetTimeout（（） => { 
    loadingInstance.close（）
  }、 30000 ） 
  config.withCredentials = 真
  戻り設定
}）

サブページの権限

　　サブページの権限、戻りデータへのユーザーのログインメニューバックがリストページへのアクセスを意味し、各メニューのためのサブページが含まれていない、リストがボタンの詳細は、詳細ページの背景にクリックして、戻らなかった、この時間はほとんどセットについて何をすることができます

　　各サブページのメニューのどの部分を識別するためのルーティング情報を追加

{ 
パス： '/ BusinessQuery' 、
名称： 'サービスクエリ' 、
コンポーネント：BusinessQuery 
}、
{ 
パス： '/ BusinessQueryディテール' 、
メタ：{parentPath： '/ BusinessQuery'}、// 対応親ページパス 
名：「ビジネスのお問い合わせの詳細」、
コンポーネント：BusinessQueryDetail 
}、

　　次いで、ルートは、グローバルルーティングジャンプフックに決定されます

route.beforeEach（（に、次の、から）=> {
   場合（sessionStorage.token）{
     場合（to.fullPath == '/ログイン' ）{ 
      次の（）
    } 他{ 
      にconsole.log（）の
      場合（JSON。パース（sessionStorage.pathList）.indexOf（to.path）== - 1 && JSON.parse（sessionStorage.pathList）.indexOf（to.meta.parentPath）== - 1 ）{
         戻り、次の（ '/ error401' ）
      } 他{ 
        次の（）
      } 
    } 
  } 他{
     場合（to.fullPath == '/ログイン' ）{
       戻り、次の（）
    }他{ 
      次（ '/ログイン' ）
    } 
  } 
}）

[アクセス許可]ボタンとして、システムは、管理役割を持っている、あなたは特定の役割の権限を変更することができ、すべてのボタン権は役割に応じて適宜決定することができない、と背景のみがすべてのボタンのIDを記録するようにする愚かなことができ、その後、ユーザーを返す着陸後にアクセスすることができますボタン、

IDに基づいてフィルタを行うには、各ボタンのIDに対応するフロントエンドシステムのデータがあります、対応するボタンを表示または非表示にするページをロードするときに返さ

VUEフロントエンドログイン

おすすめ