ログインジャンプを行わないuniapp初期化の実装方法の簡単な分析

UniApp を使用して開発している場合、ショッピング カートや注文ページなど、ユーザーがログインする必要があるページが表示されることがあります。では、ログインしていないときに自動的にログインページにジャンプするにはどうすればよいでしょうか?この記事では、ログインジャンプを行わないUniAppの初期化の実装方法を詳しく紹介します。

1. 要件分析

アプリケーションにログイン機能を追加し、ログインしていない状態で該当ページに入ったときにログインページにジャンプできるようにします。

2. 実装のアイデア

1. ログイン関連のロジック コードを App.vue ファイルに記述します。
2. ログインが必要なページに入る際に、ルーティングインターセプターを使用してユーザーがログインしているかどうかを確認し、ログインしていない場合は自動的にログインページにジャンプします。
3. Vuex を使用してユーザー情報を管理し、ログイン状態の保存とユーザー情報の転送を行います。

3. コードの実装

1. App.vue にログイン ロジックを追加する

App.vue で作成したライフサイクル関数でログイン検証ロジックを実行できます。例:

created(){
    // 检查用户是否已登录
    let loginInfo = uni.getStorageSync('loginInfo') || null;
    if(loginInfo){
        this.$store.commit('saveUserInfo', loginInfo);
    }else{
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
}

ここでは、uni.getStorageSync() メソッドを通じてローカルに保存されたログイン情報を取得します。ログイン情報が存在する場合は、ユーザー情報を Vuex 状態マネージャーに渡し、ログイン情報が存在しない場合は、ログイン ページにジャンプします。

2. ルート インターセプターの実装

通常の状況では、ルート ジャンプの前にログイン ステータスがチェックされます。ログインが必要なページにジャンプする前に、関連する操作を実行するルート インターセプターを定義できます。

main.js にルーティングを導入します:

import router from './router';

とルーティング インターセプターを追加します:

router.beforeEach((to, from, next) => {
    // 进入需要登录的页面前先进行登录状态检查
    let isLogin = store.getters.getLoginStatus;
    if (to.meta.requireAuth) { 
        // 如果未登录，则跳转至登录页面
        if(!isLogin){
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            });
        }else{
            next();
        }
    }else{
        next();
    }
});

ここでは、ルーティングで requireAuth フィールドがマークされているかどうかに基づいてページを判断します。ログインを要求します。ログインする必要がある場合は、現在のユーザーがログインしているかどうかを確認します。ログインしていない場合は、ログイン ページにジャンプします。ログインしていない場合は、継続的なアクセスを許可します。ログインが必要ない場合は、直接ジャンプしてください。

3. ユーザー情報の保存と転送を実装する

ユーザー情報を管理するために、Vuex ステート マネージャーに userInfo という名前のモジュールを作成します。ユーザー関連のゲッター、ミューテーション、およびアクションをその中で定義できます。

userInfo.js ファイルで、次のコードを定義します。

const state = {
    userInfo: null
}

const getters = {
    getUserInfo: state => state.userInfo,
    getLoginStatus: state => state.userInfo != null
}

const mutations = {
    saveUserInfo (state, userInfo) {
        state.userInfo = userInfo;
        uni.setStorageSync('loginInfo', userInfo);
    },
    logout(state){
        state.userInfo = null;
        uni.removeStorageSync('loginInfo');
    }
}

const actions = {
    login({ commit }, userInfo) {
        // 登录操作
        commit('saveUserInfo', userInfo);
    },
    logout({ commit }){
        // 登出操作
        commit('logout');
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

ここでは、ユーザー情報を取得、保存、クリアするための getUserInfo、getLoginStatus、saveUserInfo、ログアウト、ログインなどの関数を定義します。ログインおよびログアウト操作をシミュレートします。このうち、saveUserInfo メソッドがユーザー情報を保存する場合、ユーザー情報を状態に渡すだけでなく、永続的な保存を容易にするためにローカルにも保存されます。

4. まとめ

UniAppが提供するルーティングインターセプターとVuexステートマネージャーを利用することで、未ログイン時に自動的にログインページにジャンプする機能を実現します。他のページでログインデータを使用する必要がある場合は、対応するコンポーネントに Vuex を導入するだけで済み、非常に便利です。

以上がログインジャンプを行わないuniapp初期化の実装方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。