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 を応援してください。 以下もご興味があるかもしれません:
|
<<: WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します
>>: MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)
不明な点があるときはいつでも、Blog Park にアクセスして、いつでも答えやインスピレーションを...
ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...
目次アプリ.vueサブ1.vueサブ2.vue要約する vue2 における非親子コンポーネントの値の...
Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...
<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...
少し前に、製品バージョンをテスト用にテスターに提出したのですが、テスト結果はまったく予想外のもの...
1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...
目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...
概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...
Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...
バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...
Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...
CentOS 8にDockerをインストールする公式ドキュメント: https://docs.doc...
1. プリコンパイルの利点私たちは皆、プリコンパイル機能を備えた JDBC の PreparedSt...
JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...