VUE-要素管理者制度改革の手順

暖かい場所の代わりに、シングルサインオンでログインするページ。

1. SRC /ストア/モジュール/ setSSOUserTokenを高めるuser.jsの方法

constのアクション= {
   // ユーザーログイン
  ログイン（{、}のUserInfoをコミット）{ 
    constの{ユーザー名、パスワード} = のUserInfo
     返す 新しい約束を（（解決、拒否）=> { 
      ログイン（{ユーザー名：username.trim（）、パスワード：パスワード}）。次に、（応答 => { 
        CONST {データ} = 応答
        （コミット 'SET_TOKEN' 、data.token）
        setToken（data.token）
        決意を（）
      }）。キャッチを（エラー=> { 
        拒否（エラー）
      }）
    }）
  }、

  setSSOUserToken（ssouserTokenを{コミット}）{ 
    （コミット 'SET_TOKEN' 、ssouserToken）
    setToken（ssouserTokenを）
  } 
}

2. SRC / permission.js変更決意条件、シングルサインオンページにジャンプすると、撮影したURLは、URLを処理し、トークンの取得を返され、ターゲットページへジャンプ

「./router」からインポートルータ
からインポートストア「./store」
からインポート{メッセージ}『要素-UI』
からインポートNProgress『nprogress』// プログレスバー 
インポート『nprogress / nprogress.css』// プログレスバースタイルの 
インポート{入手トークン、setToken} '@ / utilsの/認証'から// GETトークンクッキーから 
'@ / utilsの/ GET-ページタイトル'からインポートgetPageTitle 
{getQueryString、param2Obj、getQueryObject}インポートから '@ / utilsの' 

NProgress.configure （{showSpinner：偽 }）// NProgress設定

CONSTホワイト = [ '/ログイン'、 '/ AUTH-リダイレクト'] //リダイレクトしないホワイトリストない

router.beforeEach（非同期（に、）次の、から => {
   // 開始プログレスバー
  NProgress.start（）

  // 集合ページタイトル 
  document.title = getPageTitle（to.meta.title）

  // かどうかを決定しますユーザがログインした 
  CONST hasToken = （）入手トークン

  場合（hasToken）{
     場合（to.path === '/ログイン' ）{
       // ログインしている場合、ホーム・ページにリダイレクト 
      次（{パス： '/' } ）
      NProgress.done（）
    } 他{
       //ユーザーがGETINFOを通じて彼の許可の役割を取得しているかどうかを判断 
      constのhasRoles = store.getters.roles && store.getters.roles.length> 0 であれば（hasRoles）{ 
        次の（）
      } 他{
         試み{
           // 取得したユーザ情報// ノート：役割は、オブジェクト配列でなければなりません！例えば：[ '管理']または、[ '開発者'エディタ'] 
          CONST {ロール} =のawait store.dispatch（ 'ユーザ/ GETINFO' ）// アクセス経路が役割に基づいてマップを生成 
          CONST accessRoutes =のawait店舗。派遣（ '許可/ generateRoutes' 、
      
          

          

          
          router.addRoutes（accessRoutes）

          // ハック方法addRoutesが完全であることを確実にするために
          、// 置き換え設定：真、ナビゲーションが履歴を残さないように 
          （{...、交換する：隣の真}）
        } キャッチ（エラー）{
           // トークン削除して再ログインするログインページに進みます 
          （ 'ユーザー/ resetToken'のawait store.dispatch ）
          Message.error（エラー || 'エラー'を有している）
          （ `次 /ログイン？リダイレクト= $ {へ。パス} `）
           NProgress.done（）
        } 
      } 
    } 
  } 他{
    / * 持っていないトークン* / 

    場合（whiteList.indexOf（to.path）！== -1 ）{
       // 、直接行くホワイトリスト無料ログイン中
      の次の（）
    } 他{
       // へのアクセス権を持っていない他のページアクセスは、ログインページにリダイレクトされます。
      // 次の（ `/ログイン？リダイレクト= $ {to.path}`）
      // NProgress.done（）
      // 获取トークン 
      CONSTトークン= getQueryString（ 'SSOUserToken' ）
      CONST token2 = param2Obj（window.location.href）
      CONST token3 = getQueryObject（window.location.href）
       の場合（トークン）{ 
        store.dispatch（ 'ユーザ/ setSSOUserToken' 、は、decodeURIComponent（トークン））
         // setToken（は、decodeURIComponent（トークン）） 
        window.location.href = window.location.href.split（ "？"）[0 ] 
      } 他{
         // トークン不存在、跳转单点登录页面 
        window.location.href = 'https://erpportal.ztzs.cn/sso/account/CheckToken/?LoginCallback=' + window.location.href 
      } 

    } 
  } 
}）

router.afterEach（（） => {
   // 仕上げプログレスバー
  NProgress.done（）
}）

VUE-要素管理者制度改革の手順

おすすめ