유니앱 로그인 유지 방법-uni-app-php.cn

집

웹 프론트엔드

uni-app

유니앱 로그인 유지 방법

PHPz

Apr 27, 2023 am 09:03 AM

Uniapp으로 로그인 상태를 유지하는 방법

Uniapp은 Vue.js 기반의 크로스 플랫폼 개발 프레임워크로, iOS, Android, H5와 같은 멀티 플랫폼 애플리케이션을 개발하는 데 사용할 수 있습니다. 실제 프로젝트 개발 과정에서 로그인, 로그아웃, 데이터 상호작용 등의 문제가 발생하면 로그인 상태를 어떻게 유지해야 할지 늘 난관이 있었습니다. 아래에서는 유니앱이 로그인 상태를 관리하는 방법을 여러 측면에서 소개하겠습니다.

로그인 및 인증정보 저장

실제 개발에서는 먼저 로그인을 해야 다른 작업을 할 수 있습니다. 사용자가 로그인하면 서버는 인증 정보(예: 토큰)를 클라이언트에 반환합니다. 클라이언트는 인증 정보를 받은 후 후속 데이터 상호 작용 작업을 위해 이를 저장해야 합니다. Uniapp은 인증 정보를 저장하는 방법을 제공하며, 이는 uni-storage 또는 uni-app 전역 개체에 저장될 수 있습니다.

uni.setStorageSync('token', res.data.token); // 유니 스토리지 스토리지
uni.$app.globalData.token = res.data.token; // 유니앱 전역 객체 스토리지

자동 로그인

우리는 매번 수동으로 로그인할 필요 없이 사용자가 앱을 닫았다가 다시 열 때 자동으로 로그인할 수 있기를 원합니다. 자동 로그인을 달성하기 위해 애플리케이션이 열릴 때 인증 판단을 수행하여 로그인 여부를 확인할 수 있습니다. 로그인한 경우 메인 페이지로 들어가고, 그렇지 않으면 로그인 페이지로 들어갑니다. 다음은 샘플 코드입니다.

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

로그인 후 복사

});