로그인 점프 없이 유니앱 초기화 구현 방법에 대한 간략한 분석

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라는 모듈을 생성하여 사용자 정보를 관리합니다. 사용자 관련 getter, 변이 및 작업을 정의할 수 있습니다.

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만 도입하면 매우 편리합니다.

위 내용은 로그인 점프 없이 유니앱 초기화 구현 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!