Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています

Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています

1. まずリクエスト設定ファイルを見て、axios.createメソッドを見てください。baseURLは基本的なルートです。

ベースURL:process.env.VUE_APP_BASE_API、

パス: src-utils-request.js

2. 次に、service.interceptors.request.use を見て、トークン要求ヘッダーを設定します。私のバックエンドは jwt と統合されているため、図に示すように、要求ヘッダーは Authentication です。

config.headers['認証'] = getToken() 

3. 独自のステータスコードを設定します。service.interceptors.response.useを参照してください。図に示すように、独自のステータスコードに設定します。

これは私のサーバーが応答するデータです。1は通常の応答データです

{
    "コード": 1,
    "データ": {
    「トークン」: 「eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBY2NvdW50SWQiOiJhZG1pbiIsIm5iZiI6MTYyNDE3NTM4MiwiZXhwIjoxNjI0MTc1NDQyLCJpYXQiOjE2MjQxNzUzODJ9.7p8EHMx1b4-yIMRN7Qxden3nZsDmBvevHEf-3oVhFMg」、
    "メッセージ": "ログイン成功",
    「状態」: 真
    }
}

4. .env.production と .env.development の api を空に変更すると、画像には .env.production のみが表示されます。

5. 基本的なルーティング設定を変更し、devServer の後に次のコードを追加します (前の行はデータをシミュレートするために使用され、必要ありません)。図を参照してください。

// 以前: require('./mock/mock-server.js')
    プロキシ: {
      [process.env.VUE_APP_BASE_API]: {
        ターゲット: 'https://xiaoxingbobo.top',
        // ターゲット: 'http://192.168.1.119:8081',
        // ターゲット: 'http://192.168.1.253:8081',
        変更元: true、
        パス書き換え: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    } 

基本的なルーティングは基本的にここで設定されます。

6. src-view-login-index.htmlファイルで、Vue-Element-Adminのログインインターフェースを見つけて、図に示すように次のコードを追加します。公式のリクエストメソッドをコメントアウトします。this.loginFormはリクエストパラメータです。

this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ パス: this.redirect || '/'、クエリ: this.otherQuery })
              this.loading = false
            })
            .catch((e) => {
              このツールのログ(e)
              this.loading = false
            }) 

7. ユーザーが正常にログインした後のジャンプを設定します。ログイン後にトークンをキャッシュする必要があります。そうしないと、ログインページがジャンプしません。

src-store-moduls-use.jsでは、図に示すように

アクションの下にあるログインメソッドを見つけて、コードを次のように変更します。

定数アクション = {
  // ユーザーログイン
  ログイン({
    専念
  }, ユーザー情報) {
    定数{
      アカウントID、
      パスワード
    } = ユーザー情報
 
    新しい Promise を返します ((resolve, reject) => {
      コンソールログ('userInfo', userInfo)
      //サーバーに必要なログインパラメータ const payload = {
        アカウントID: アカウントID、
        パスワード: パスワード
      }
      //サーバーにリクエスト user.login(payload).then(response => {
        定数{
          データ
        } = 応答
        console.log('レスポンス', レスポンス)
        コミット('SET_TOKEN'、データ.token)
        setToken(データトークン)
        解決する()
      }).catch(エラー => {
        拒否(エラー)
      })
    })
  },

getInfo メソッドを見つけて、コードを次のように変更します。ユーザー情報を取得するためのインターフェースが記述されていないため、データは直接ハードコードされています。自分のニーズに合わせて調整してください。

情報を取得する({
    専念、
    州
  }) {
    新しい Promise を返します ((resolve, reject) => {
      /**
       * ユーザー情報と権限はここで要求されます。現在、インターフェースは実装されておらず、コメントのみが与えられ、データはハードコードされています* */
      // user.getInfo(state.token).then(レスポンス => {
      // 定数{
      // データ
      // } = レスポンス
      定数{
        データ
      } = {
        データ: {
          役割: ['管理者'],
          紹介: 「管理者」、
          アバター: 'https://cloud.xiaoxingbobo.top/nongzhibang/20210429/1107491622257669573',
          名前: '管理者'
        }
      }
 
      if (!データ) {
        拒否('検証に失敗しました。再度ログインしてください。')
      }
 
      定数{
        役割、
        名前、
        アバター、
        、
        トークン
      } = データ
 
      // ロールは空でない配列である必要があります
      if (!roles || roles.length <= 0) {
        拒否('getInfo: ロールは null 以外の配列である必要があります!')
      }
 
      コミット('SET_ROLES', ロール)
      コミット('SET_NAME', 名前)
      コミット('SET_AVATAR', アバター)
      commit('SET_INTRODUCTION', 導入)
      コミット('SET_TOKEN', トークン)
      解決(データ)
      // }).catch(エラー => {
      // 拒否(エラー)
      // })
    })
  },

これでVue-Element-Adminが完了し、ホームページにログインできるようになります。

これで、Vue-Element-Admin が独自のインターフェースを統合してログインジャンプを実現することに関するこの記事は終了です。Vue-Element-Admin ログインジャンプの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません:
  • vue-element-admin でデフォルト言語を設定する方法
  • vue-element-admin を中国語に変換する方法
  • バックエンド管理システムを構築するためのvue-element-adminの実装手順
  • vue-element-admin グローバル読み込み待機中
  • vue-element-admin ログイン フルプロセス共有

<<:  WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します

>>:  MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)

推薦する

CentOS 7.6 Telnetサービス構築プロセス(Opensshアップグレードバトル第一弾のバックアップトランスポートライン構築)

不明な点があるときはいつでも、Blog Park にアクセスして、いつでも答えやインスピレーションを...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

Vue3 における非親子コンポーネントの値転送の詳細な説明

目次アプリ.vueサブ1.vueサブ2.vue要約する vue2 における非親子コンポーネントの値の...

Nginx プロセス スケジューリングの問題の詳細な説明

Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成

1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...

Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法

目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

jQueryは、マウスをドラッグしてdivの位置とサイズを変更する方法を実装しています。

Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...

Confluence と jira-software を Docker にデプロイする方法

バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...

Nginx のパフォーマンスを向上させるための提案

Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...

CentOS 8にdockerをインストールする最も詳細な方法

CentOS 8にDockerをインストールする公式ドキュメント: https://docs.doc...

1 つの記事で MySQL のプリコンパイルを理解する

1. プリコンパイルの利点私たちは皆、プリコンパイル機能を備えた JDBC の PreparedSt...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...