유니앱 하이브리드 개발, 로그인 기능 구현

모바일 기기의 대중화와 함께 모바일 애플리케이션은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 로그인 기능을 구현하는 것은 모든 애플리케이션의 기본 기능 중 하나입니다. 이번 글에서는 uniapp 하이브리드 개발 프레임워크를 사용하여 로그인 기능을 구현하는 방법을 소개하겠습니다.

1. uniapp 소개

Uniapp은 Vue.js를 기반으로 하는 하이브리드 개발 프레임워크로, 동일한 코드 세트를 사용하여 iOS, Android, H5, 애플릿 등 다양한 플랫폼용 애플리케이션을 개발할 수 있습니다. 더 중요한 것은 로컬 패키징 및 클라우드 패키징 기능도 지원하므로 애플리케이션 개발 효율성과 사용자 경험을 크게 향상시킬 수 있다는 것입니다.

2. 구현 프로세스

로그인 기능 구현 프로세스는 대략 다음과 같습니다.

1. 사용자 이름과 비밀번호 입력 상자, 로그인 버튼을 포함한 로그인 인터페이스를 작성합니다.
2. uniapp의 vuex(Vue.js의 상태 관리자)에서 사용자의 로그인 상태를 관리합니다.
3. 네트워크 요청을 통한 확인을 위해 사용자의 로그인 정보를 서버에 전달합니다.
4. 인증에 성공하면 사용자의 관련 정보가 로컬 캐시에 저장되고 동시에 vuex의 사용자 상태가 업데이트됩니다.
5. 관련 기능을 구현하기 위해 사용자가 애플리케이션에 로그인했는지 여부를 확인합니다.

다음으로 위의 과정을 단계별로 구현해보겠습니다.

2.1 로그인 인터페이스 작성

uniapp 프로젝트에서는 Vue 컴포넌트를 작성하여 인터페이스를 구현합니다. 페이지 폴더 아래에 Login.vue 파일을 생성하고 로그인 인터페이스에 대한 코드를 다음과 같이 작성합니다.

<!-- Login.vue -->
<template>
  <view class="container">
    <view class="input-box">
      <input v-model="username" type="text" placeholder="用户名">
    </view>
    <view class="input-box">
      <input v-model="password" type="password" placeholder="密码">
    </view>
    <view class="btn-wrapper">
      <button @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      /* 登录验证 */
    }
  }
}
</script>

<style>
/* 样式 */
</style>

위 코드에서는 uniapp에서 제공하는 Vue 구성 요소와 몇 가지 간단한 스타일을 사용하여 로그인 인터페이스를 구축합니다. 입력 상자와 로그인 버튼을 정의하고, 로그인 버튼을 클릭하면 handlerLogin 메소드를 호출합니다.

2.2 사용자 상태 관리

유니앱에서 애플리케이션 상태를 관리하는 도구는 vuex입니다. 먼저 프로젝트에 저장소 폴더를 만들고(없는 경우) 저장소 폴더 아래에 index.js 파일을 만들어야 합니다. 다음으로 index.js에서 사용자의 상태와 작업을 정의합니다.

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null, // 用户信息
    isLogin: false // 是否登录
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    setIsLogin(state, isLogin) {
      state.isLogin = isLogin
    }
  },
  actions: {
    login({ commit }, userInfo) {
      /* 登录验证 */
    },
    logout({ commit }) {
      /* 退出登录 */
    }
  }
})

export default store

위 코드에서는 먼저 Vue.use() 메서드를 통해 Vuex 플러그인을 사용한 다음 저장소 개체를 정의합니다. store 객체에서는 상태, 변이, 액션 등 Vue.js의 기본 개념을 사용합니다. 상태는 애플리케이션의 상태를 저장하는 데 사용되고, 돌연변이는 상태를 수정하는 데 사용되며, 작업은 돌연변이를 제출하는 데 사용됩니다. 우리는 사용자 정보와 사용자 로그인 여부를 저장하는 데 사용되는 userInfo 및 isLogin이라는 두 가지 상태를 정의했습니다. 다음으로 로그인과 로그아웃이라는 두 가지 작업을 정의합니다. 이러한 작업은 상태에 대한 수정 및 제출입니다.

2.3 로그인 확인 수행

다음으로 로그인 확인 로직을 구현해야 합니다. 액션에서는 로그인 방법을 정의합니다. 이 방법에서는 서버에 확인을 요청하기 위해 비동기 작업을 수행할 수 있습니다.

// store/index.js
actions: {
  async login({ commit }, userInfo) {
    const res = await uni.request({
      url: 'http://api.example.com/login',
      method: 'POST',
      data: userInfo
    })

    if(res.data.code === 0) {
      // 登录成功
      const userInfo = res.data.userInfo

      // 更新本地存储信息
      uni.setStorageSync('userInfo', userInfo)

      // 更新Vuex状态
      commit('setUserInfo', userInfo) // 存储用户信息
      commit('setIsLogin', true) // 修改登录状态
    } else {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      })
    }
  }
}

로그인 방법에서는 먼저 uni.request 방법을 통해 서버에 POST 요청을 보내고 거기에 사용자 정보를 전달합니다. 서버로부터 피드백을 받은 후 간단한 판단을 내렸습니다. 로그인 인증에 성공하면 서버에서 반환한 사용자 정보가 로컬 캐시에 저장되고, vuex의 사용자 정보와 로그인 상태가 업데이트됩니다. 확인에 실패하면 안내 메시지가 나타납니다.

2.4 Logout

store/index.js 파일에는 사용자의 로그아웃 동작을 처리하기 위한 로그아웃 메소드도 정의되어 있습니다.

// store/index.js
actions: {
  // ...省略上文中的代码
  async logout({ commit }) {
    // 清除本地缓存信息
    uni.removeStorageSync('userInfo')

    // 清除App Store
    commit('setUserInfo', null)
    commit('setIsLogin', false)
  }
}

로그아웃 메소드에서는 uni.removeStorageSync 메소드를 사용하여 로컬 캐시 정보를 지울 수 있습니다. . 동시에 vuex의 사용자 정보와 로그인 상태도 업데이트해야 합니다.

2.5 애플리케이션에서 사용자의 로그인 상태 확인

애플리케이션에서는 사용자가 로그인했는지 여부를 확인하는 것이 필요합니다. 로그인되어 있지 않은 경우 로그인 페이지로 이동해야 합니다. Vue.js의 beforeEach 전역 라우팅 후크를 사용하여 로그인 여부를 결정합니다. 코드는 다음과 같습니다.

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})

app.$mount()

// 全局路由钩子
uni.$on('routeUpdate', function() {
  uni.getStorage({
    key: 'userInfo',
    success: function(res) {
      // 用户已登录，更新Vuex状态
      store.commit('setIsLogin', true)
      store.commit('setUserInfo', res.data)
    },
    fail: function() {
      // 用户未登录，跳转到登录页
      if(uni.getStorageSync('isLogin') !== 'true' && uni.getStorageSync('isLogin') !== true) {
        uni.navigateTo({
          url: '/pages/Login'
        })
      }
    }
  })
})

위 코드에서는 uni.$on 메소드를 사용하여 경로의 업데이트 이벤트를 수신하고 경로가 변경되면 판단하십시오. 먼저 uni.getStorage 메소드를 통해 로컬 캐시에 있는 사용자 정보를 얻습니다. 사용자 정보를 성공적으로 획득했다면 해당 사용자가 로그인했다는 뜻이며, vuex에서 사용자 상태를 업데이트할 수 있습니다. 그렇지 않으면 로그인 페이지로 이동합니다.

3. 요약

이번 글에서는 유니앱 하이브리드 개발 프레임워크를 활용하여 로그인 기능을 구현하는 방법을 소개했습니다. 먼저 로그인 인터페이스를 작성하여 애플리케이션 인터페이스를 구축한 다음 vuex를 사용하여 애플리케이션 상태를 관리하고 사용자 로그인 상태를 기록 및 관리한 다음 애플리케이션의 네트워크 요청을 통해 사용자 로그인 정보를 확인하고 Local을 사용했습니다. 캐싱 기술은 사용자 상태를 기록합니다. 마지막으로 라우팅 후크 메커니즘을 사용하여 사용자 로그인 상태를 확인하고 이동합니다.

위 내용은 유니앱 하이브리드 개발, 로그인 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!