Vue を使用してログイン ページ ジャンプの出力パラメーターを実装する方法

フロントエンド テクノロジの急速な発展と普及に伴い、Vue テクノロジを適用して独自の Web サイトを構築する企業が増えています。企業 Web サイトのアプリケーションにおいて、ログインは無視できないリンクであり、Vue はログイン機能を実現するための独自のメソッドを備えています。この記事では、Vue を使用してログイン ページ ジャンプの出力パラメーターを実装し、ユーザーのログイン検証を実装する方法を紹介します。

1. 事前準備

ジャンプ出力パラメータの実装を開始する前に、次の手順を完了する必要があります:

(1) Vue-CLI のインストール

Vue-CLI は、構成操作を簡素化する Vue の公式スキャフォールディング ツールで、特にプロジェクトの作成、開発、パッケージ化の構築に関して、すぐに Vue 開発に取り組むことができます。

インストール方法:

npm install -g @vue/cli

(2) Vueプロジェクトの作成

コマンドラインで作成できます。ターミナルの Vue プロジェクトでプロジェクトのルート ディレクトリを入力し、コマンド ラインを使用して次のステートメントを実行します:

vue create my-project

2. ロジックを実装します

1 ) ログインページ

ログインページでは、確認とジャンプ表示のためにユーザー名とパスワードを入力する必要があります。

Vue プロジェクトを作成した後、ページ ジャンプを実装するために Vue プラグイン vue-router をインポートする必要があります。

まず、プロジェクトの src ディレクトリに移動し、新しい login.vue ファイルを作成し、ページ上でログイン操作を実行します。

<script><br>import { mapActions } from "vuex";<br>export デフォルト {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data() {     return {         username: '',         password: ''     } }, methods: {     ...mapActions(['login']),     // 登录     async submit() {         await this.login({ username: this.username, password: this.password });     } }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>}<br></script>

2) Web サイトのバックグラウンド操作用のサーバー インターフェイスを確立する

ログイン リクエストを処理して返すために、サーバー側で RESTful API インターフェイスを提供する必要があります。対応する結果データ。 Vue プロジェクトでは、リクエスト インターフェイスの操作に Axios ライブラリを使用できます。

Vue プロジェクトのルート ディレクトリで、コマンド ラインを使用して次を実行します。

npm install axios

Vue プロジェクトのルート ディレクトリで、新しいサービスを作成します.js ファイルを作成し、Axios API リクエスト プロセスに基づいてカプセル化し、アプリケーション全体の別個の Vue プラグインとして提供します。

//axios ライブラリを導入します
import axios from "axios";
//axios インスタンスを作成します
const service = axios.create({

baseURL: "http://192.168.0.102",
timeout: 10000

});
export default ({ Vue }) => {

Vue.prototype.$axios = service;

}

src ディレクトリのindex.js ファイルでは、先ほど作成した service.js ファイルを使用する必要があります。 Vue プラグインとしてカプセル化して登録します。

import Vue from 'vue'

import service from './service' //サービスの紹介

//サービス プラグインの登録
Vue.use(サービス、{ Vue })

ボタンをクリックしてログイン ロジックを実行すると、バックグラウンドを呼び出してログイン結果データを検証して取得する必要があります。ログイン結果データは Vuex に保存され、Vue プラグイン Vuex を通じて登録されます。

src ディレクトリに、Vuex 関連の操作を保存するための新しいストア ディレクトリを作成します。まず、ストア ディレクトリに新しい types.js ファイルを作成して、Vuex の操作タイプを定義します:

// tables.js
export const LOGIN_SUCCESS = "LOGIN_SUCCESS"; // ログイン成功
import const LOGIN_FAIL = "LOGIN_FAIL"; // ログインに失敗しました

ストア ディレクトリに新しいactions.js ファイルを作成し、Vuex アクションをカプセル化して、Vue コンポーネントでこれらのアクションをトリガーし、状態を更新します。

import * as types from './types.js'
export デフォルト {

login: ({ commit }, param) => new Promise((resolve, reject) => {
    const { username, password } = param;
    this.$axios.post('/login', { username, password }).then(res => {
        const data = res.data;
        if (data.code === 200) {
            commit(types.LOGIN_SUCCESS, { data });
            resolve();
        }
        else {
            commit(types.LOGIN_FAIL, { message: data.message });
            reject(data.message);
        }
    })
})

}

src/store ディレクトリに新しいストアを作成します。 js ファイルを作成し、ステータス、ミューテーション、アクションなどの関連コンテンツを作成します。

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import action from './actions.js'
import * as type from './types.js'

Vue.use(Vuex)
const store = new Vuex.Store({

state: {
    info: {
        isLogged: false, // 是否登录
        name: "", // 登录用户名
    }
},
mutations: {
    [types.LOGIN_SUCCESS](state, { data }) {
        state.info.isLogged = true;
        state.info.name = data.name;
    },
    [types.LOGIN_FAIL](state, { message }) {
        state.info.isLogged = false;
        state.info.name = "";
        console.log(message)
    }
},
actions

})

デフォルト ストアをエクスポート

src ディレクトリの main.js ファイルで、次のように、store.js を Vue に登録する必要があります:

import Vue from 'vue'
import App from './ App.vue'
'./router'からルーターをインポート
'./store/store.js'からストアをインポート'

Vue.config.productionTip = false
new Vue( {

router,
store, // 注册Vuex
render: h => h(App)

}).$mount('#app')

3) ページにジャンプしてパラメータ結果を出力

状態パラメータ isLogged と name を Vuex に導入します, ログインに成功すると、Vuex のステータスが更新されます。ログインに成功した後、ルーティングを通じて新しいページにジャンプするときに、ログイン情報と出力結果パラメータを新しいページに渡す必要があります。

Vue プロジェクトでは、コードを通じて新しいページにジャンプするルーター プログラミング方法を選択できます。

router.js ファイルで、ルーティングとログイン検証ステータス、および出力結果パラメータを記述する 2 つのキー フィールドを定義します。

'vue' から Vue をインポート
'vue-router' からルーターをインポート
'./views/Home.vue' からホームをインポート
'./views/Login からログインをインポート.vue'
Vue.use(Router)
const router = new Router({

mode: 'history',
routes: [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { requiresAuth: true } // requireAuth用于表示页面是否需要登录才能访问，本例中仅仅对home页面设置了登录验证
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
]

})
router.beforeEach((to, from, next) => { / / ルーティングが切り替えられたときにページのログイン検証を実行します

if (to.matched.some(record => record.meta.requiresAuth)) {
    const isLogged = store.state.info.isLogged;
    if (!isLogged) next({ name: 'login' })
    else next()
} else {
    next()
}

})

ログインが成功したら、ルーターを使用してジャンプし、出力結果パラメータを必要なコンポーネントに渡す必要があります。コンポーネントは queryString ライブラリを導入する必要があります:

在登录成功的方法中：

import router from '../router'
import { stringify } from 'querystring'

commit(types.LOGIN_SUCCESS, { data })
const queryString = stringify({ name: data.name }) // 使用 queryString 库，将参数转化为字符串
router.push({ name: "home", query: { authInfo: window.btoa(queryString) }}) // 使用 router 进行跳转，这里使用了 Base64 编码策略，有兴趣的可以了解一下

在Home.vue组件中，我们通过created钩子，获取路由中的输入参数并将其输出。

export default {

name: 'home',
created() {
    if (this.$route.query.authInfo !== undefined) { // 如果存在 authInfo
        const res = atob(this.$route.query.authInfo) // Base64解码操作
        this.formData = qs.parse(res) // 请求参数解码操作
        console.log(this.formData) // 输出参数信息
    }
},
data() {
    return {
        formData: {}
    }
}

}

至此，我们已经成功使用Vue实现登录页跳转输出参数的功能。

结语

本文介绍了如何利用 Vue 实现跳转输出参数，通过 Vue-CLI、Axios、Vuex 和 Vue-Router 等技术栈，实现了基于Vue的网站登录验证功能。当然了，本文的实现是源于作者的参考和思考，如果您也有更好的实现方式，请跟我们一起分享并探讨。

以上がVue を使用してログイン ページ ジャンプの出力パラメーターを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。