uniappでログイン状態を維持する方法

Uniapp でログイン ステータスを維持する方法

Uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークであり、iOS、Android、H5 などのマルチプラットフォーム アプリケーションの開発に使用できます。実際のプロジェクトの開発では、ログイン、ログアウト、データのやり取りなど、ログイン状態をいかに維持するかが常に課題でした。以下では、Uniapp がログイン状態をどのように維持しているかをいくつかの側面から紹介します。

1. ログインと認証情報の保存

実際の開発では、他の操作を実行する前に、まずログインする必要があります。ユーザーがログインすると、サーバーは認証情報 (トークンなど) をクライアントに返します。認証情報を受信したクライアントは、後続のデータ対話操作のためにそれを保存する必要があります。 Uniapp は、uni-storage または uni-app グローバル オブジェクトに保存できる認証情報を保存するためのメソッドを提供します。

uni.setStorageSync('token', res.data.token); // ユニストレージ ストレージ
uni.$app.globalData.token = res.data.token; // ユニアプリGlobal Object Storage

2. 自動ログイン

ユーザーがアプリケーションを閉じてからアプリケーションを開いたときに、手動でログインすることなく自動的にログインできるようにしたいと考えています。毎回。自動ログインを実現するために、アプリケーションを開いたときにログインしているかどうかの認証判定を行うことができます。ログインしている場合はメインページに入り、ログインしていない場合はログインページに入ります。以下はサンプル コードです:

async onLaunch() {

const token = uni.getStorageSync('token');
if (token) {
    // 已经登录，获取用户信息，进入主页面
    try {
        const userInfo = await getUserInfo(token);
        store.commit('setUserInfo', userInfo);
        uni.switchTab({
            url: '/pages/home/home'
        });
    } catch (e) {
        console.log(e);
    }
} else {
    // 未登录，进入登录页面
    uni.reLaunch({
        url: '/pages/login/login'
    });
}

}

3. Interceptor

Interceptor (インターセプター)フィルタリング、リダイレクトなどのリクエスト処理に使用されます。インターセプタを使用して、現在要求されているインターフェイスにログイン認証が必要かどうかを判断できます。必要な場合は、すでにログインしているかどうかを判断します。すでにログインしている場合は認証情報を追加し、そうでない場合はログイン ページに移動します。

以下はインターセプターのサンプル コードです:

// リクエストの前にインターセプターを追加します
uni.addInterceptor({

// 请求前拦截
invoke(request) {
    const token = uni.getStorageSync('token');
    // 判断接口是否需要登录认证
    if (request.header.Authorization === 'Bearer ${token}') {
        // 已经登录，添加认证信息
        request.header.Authorization = 'Bearer ${token}';
    } else {
        // 未登录，跳转到登录页面
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
    // 继续请求
    return request;
},
// 响应后拦截
intercept(response, request) {
    // 处理响应结果
    return response;
}

});

4. ログアウト

##ユーザーがログアウトするときは、クライアントに保存されている認証情報をクリアする必要があります。

uni.removeStorageSync('token'); // ユニストレージのクリア

uni.$app.globalData.token = null; // ユニアプリのグローバル オブジェクトのクリア

概要

上記は、Uniapp がログイン状態を維持する方法です。標準化されたログインおよび認証方法、自動ログイン、インターセプタ、およびログアウトを通じてログイン ステータスを維持することで、アプリケーションのセキュリティとユーザー エクスペリエンスを保証できます。

以上がuniappでログイン状態を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。