uniappでログイン状態を維持する方法-uni-app-php.cn

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

PHPz

リリース： 2023-04-27 09:34:45

オリジナル

2436 人が閲覧しました

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

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

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

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

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

自動ログイン

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

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'
    });
}

ログイン後にコピー

}

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;
}

ログイン後にコピー

});