uniapp 로그인 성공 후 다른 페이지로 이동하여 새로고침하세요.

인터넷이 발달하면서 모바일 개발이 더욱 중요해졌습니다. 이를 바탕으로 uniapp은 시대의 요구에 부응하여 등장했으며 오늘날 인기 있는 크로스 플랫폼 모바일 개발 프레임워크가 되었습니다. 유니앱에서 로그인은 매우 일반적인 기능이며 새로 고침 문제도 개발 과정에서 고려해야 할 문제입니다. 이 글에서는 유니앱에서 로그인 성공 후 다른 페이지로 이동하여 새로고침하는 방법을 자세히 소개합니다.

1. 전제 지식

소개를 시작하기 전에 유니앱에 대한 몇 가지 전제 지식을 소개해야 합니다.

1. 라우팅

uniapp의 라우팅은 uni-app에 내장된 uni.navigateTo 및 uni.redirectTo 메소드로 구현됩니다. 그 중 uni.navigateTo는 다음 페이지로 이동하는 데 사용되며 이전 페이지로 돌아갈 수 있으며, uni.redirectTo는 다음 페이지로 리디렉션하는 데 사용되며 이전 페이지로 돌아갈 수 없습니다.

또한 uniapp에는 모든 페이지를 닫고 현재 페이지를 여는 uni.reLaunch, tabBar 페이지로 이동하는 uni.switchTab, 이전 페이지로 돌아가는 uni.navigateBack도 있습니다.

2.vue.js Framework

uniapp은 vue.js 프레임워크를 기반으로 구현되어 있기 때문에 컴포넌트 개발, 상태 관리, 생활 등 개발 과정에서 vue.js에 관련된 기본 구문과 기능을 숙지해야 합니다. 사이클 등

3. 비동기식 요청

로그인 기능을 구현할 때 사용자의 로그인 정보가 올바른지 확인하기 위해 백그라운드로 요청을 보내야 합니다. 따라서 uni.request 비동기 요청에 대한 관련 지식을 숙지해야 합니다.

4. 로컬 저장소

uniapp에서는 uni.setStorageSync 및 uni.getStorageSync를 사용하여 로컬 데이터를 저장하고 읽을 수 있습니다. 로컬 저장소는 여러 페이지에서 데이터를 공유하고 데이터를 지속적으로 저장할 수 있도록 도와줍니다.

2. 솔루션 소개

로그인 성공 후 새로고침을 위해 다른 페이지로 이동하는 과정에서 다음 두 가지 작업을 완료해야 합니다.

1. 사용자 로그인 상태 정보 저장

2. 상태 정보 및 페이지 다시 렌더링

다음으로 이 두 가지 작업을 수행하는 방법을 자세히 설명하겠습니다.

1. 사용자 로그인 상태 정보 저장

사용자가 성공적으로 로그인한 후에는 사용자의 로그인 상태 정보를 저장해야 합니다. 구현 계획은 다음과 같습니다.

1단계: 로그인 성공의 콜백 함수에서 사용자의 로그인 상태 정보를 가져오고 로컬에 저장하도록 백그라운드로 요청을 보냅니다.

uni.request({
  url: 'http://www.example.com/login',
  data: {
    username: 'username',
    password: 'password'
  },
  success: (res) => {
    if(res.statusCode !== 200) {
      uni.showModal({
        content: '登录失败，请检查用户名和密码是否正确'
      })
    } else {
      // 保存用户登录状态信息
      uni.setStorageSync('isLogin', true)
      //跳转到其他页面
      uni.navigateTo({
        url: '/pages/other/other'
      })
    }
  }
})

로그인 성공의 콜백 기능에서는 로그인 요청을 백그라운드로 보냅니다. 요청이 성공하면 사용자의 로그인 상태 정보를 로컬에 저장합니다. 이 예에서는 사용자 로그인 상태 정보의 키 이름을 isLogin으로 설정했으며 해당 값은 true입니다.

2. 사용자가 로그인했는지 확인하고 다른 페이지에서 페이지를 다시 렌더링합니다.

사용자가 로그인하고 다른 페이지로 이동한 후 사용자가 다른 페이지에 로그인했는지 확인하고 렌더링해야 합니다. 로그인 상태 정보를 기반으로 한 페이지입니다. 구현 계획은 다음과 같습니다.

Step1: 다른 페이지의 onLoad 수명주기 기능에서 사용자가 로그인했는지 확인합니다.

onLoad() {
  if(!uni.getStorageSync('isLogin')) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

다른 페이지의 onLoad 라이프 사이클 기능에서는 uni.getStorageSync를 통해 로컬에 저장된 사용자 로그인 상태 정보를 얻습니다. isLogin이 존재하지 않는 경우, 즉 사용자가 로그인되어 있지 않은 경우 사용자가 다시 로그인할 수 있도록 로그인 페이지로 리디렉션됩니다.

Step2: 다른 페이지의 onShow 라이프 사이클 기능에서 사용자가 로그인했는지 여부를 확인하고 로그인 상태 정보를 기반으로 페이지를 렌더링합니다.

onShow() {
  if(uni.getStorageSync('isLogin')) {
    //重新渲染页面
    console.log('已经登录')
  } else {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

다른 페이지의 onShow 수명주기 기능에서는 uni.getStorageSync를 통해 로컬에 저장된 사용자 로그인 상태 정보도 얻습니다. isLogin이 존재하는 경우, 즉 사용자가 로그인한 경우 페이지를 다시 렌더링할 수 있습니다. isLogin이 존재하지 않는 경우, 즉 사용자가 로그인되어 있지 않은 경우 사용자가 다시 로그인할 수 있도록 로그인 페이지로 리디렉션됩니다.

3. 요약

유니앱에서 로그인 성공 후 다른 페이지로 이동하여 새로고침하는 방법을 소개합니다. 사용자의 로그인 상태 정보를 저장하고, 사용자가 다른 페이지에서 로그인했는지 여부를 판단하고, 로그인 상태 정보를 기반으로 해당 페이지를 다시 렌더링함으로써 사용자의 로그인 기능을 더 잘 구현하고 관리할 수 있습니다. 위 솔루션은 참고용일 뿐이며 개발자는 실제 필요에 따라 이를 수정하고 최적화할 수 있습니다.

위 내용은 uniapp 로그인 성공 후 다른 페이지로 이동하여 새로고침하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!