Bagaimanakah uniapp menentukan sama ada log masuk pengguna telah tamat tempoh?

Dalam pembangunan aplikasi mudah alih, log masuk pengguna dan pengesahan pengguna adalah tugas penting mereka memastikan keselamatan dan pengalaman pengguna aplikasi. Apabila menggunakan Uniapp untuk pembangunan, kami perlu memberi perhatian khusus kepada isu log masuk pengguna. Artikel ini akan memperkenalkan cara untuk menentukan sama ada log masuk pengguna dalam Uniapp telah tamat tempoh dan memberikan contoh kod yang berkaitan.

1. Apakah tamat tempoh log masuk pengguna

Tamat tempoh log masuk pengguna merujuk kepada situasi di mana pengguna tidak melakukan sebarang operasi dalam tempoh masa tertentu dan bukti kelayakan log masuk dikitar semula oleh pelayan . Ini adalah langkah yang diambil oleh sistem untuk memastikan keselamatan akaun pengguna. Dalam Uniapp, masalah tamat tempoh log masuk pengguna juga perlu diselesaikan, jika tidak, pengguna tidak akan dapat terus menggunakan aplikasi tersebut.

2. Penyelesaian untuk tamat tempoh log masuk pengguna dalam Uniapp

Dalam Uniapp, anda boleh menggunakan pemintas permintaan dan pemintas respons untuk menyelesaikan masalah tamat tempoh log masuk pengguna. Secara khusus, anda boleh menambah Token dalam pemintas permintaan untuk mengesahkan maklumat identiti pengguna dan menentukan sama ada Token telah tamat tempoh dalam pemintas respons.

1. Pemintas permintaan

Pemintas permintaan boleh mendapatkan Token sebelum menghantar permintaan dan menambah Token pada Pengepala. Dengan cara ini, dalam permintaan seterusnya, pelayan boleh mengesahkan maklumat identiti pengguna melalui Token.

Mengambil Axios sebagai contoh, anda boleh menambah kod berikut dalam pemintas permintaan:

axios.interceptor.request.use(config => {
  // 从本地Storage获取Token
  const token = uni.getStorageSync('token')
  // 在Header中添加Token
  if (token) {
    config.headers.common['Authorization'] = token
  }
  return config
})

2. Pemintas respons

Pemintas respons boleh berada dalam Selepas pelayan mengembalikan keputusan, Token disahkan. Jika token tamat tempoh, anda perlu log masuk semula dan melompat ke halaman log masuk.

Mengambil Axios sebagai contoh, anda boleh menambah kod berikut pada pemintas respons:

axios.interceptor.response.use(response => {
  if (response.data.code === 401) {
    // Token过期，需要重新登录
    uni.showToast({
      title: '登录过期，请重新登录',
      icon: 'none'
    })
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
  return response
})

Dalam contoh ini, pemintas respons akan menentukan kod hasil yang dikembalikan ialah 401, kemudian Lompat ke halaman log masuk.

3. Pemprosesan automatik tamat tempoh log masuk pengguna

Selain menambah Token secara manual, anda juga boleh mengendalikan isu tamat tempoh log masuk pengguna secara automatik melalui beberapa fungsi yang disediakan oleh rangka kerja Uniapp.

1. Gunakan vuex

Vuex ialah alat pengurusan keadaan yang boleh menyimpan dan mendapatkan semula data dengan mudah dalam aplikasi. Dalam Uniapp, status log masuk pengguna boleh disimpan melalui Vuex. Dengan cara ini, di mana status pengguna perlu diperolehi, ia boleh diperolehi terus daripada Vuex.

const store = new Vuex.Store({
  state: {
    isLogin: false,
    user: {}
  },
  mutations: {
    login(state, user) {
      state.isLogin = true
      state.user = user
    },
    logout(state) {
      state.isLogin = false
      state.user = {}
    }
  },
  actions: {},
  modules: {},
  getters: {}
})

Dalam contoh ini, melalui alat pengurusan keadaan Vuex, dua keadaan isLogin dan pengguna boleh disimpan untuk memudahkan panggilan di tempat lain.

2. Pemalam dibangunkan menggunakan aplikasi Uni

Apl Uni, sebagai rangka kerja merentas platform, menyediakan banyak pemalam pembangunan yang kami perlukan. Antaranya, terdapat pemalam vuex-persistedstate yang sangat berguna, yang boleh menyimpan data Vuex dalam Storan tempatan.

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: uni.getStorageSync('vuex')
    })
  ]
})

Dalam contoh ini, keadaan Vuex boleh disimpan dalam Storan tempatan melalui pemalam vuex-persistedstate. Dengan cara ini, apabila pengguna membuka semula apl, data masih dikekalkan.

4. Ringkasan

Dalam Uniapp, tamat tempoh log masuk pengguna adalah masalah yang sangat biasa. Dengan menggunakan kaedah pemintas permintaan dan pemintas tindak balas, serta sokongan pemalam Vuex dan vuex-persistedstate, kami boleh menyelesaikan masalah tamat tempoh log masuk pengguna dengan mudah. Pada masa yang sama, menyelesaikan masalah ini juga boleh meningkatkan keselamatan dan pengalaman pengguna aplikasi, jadi ia perlu diambil serius.

Atas ialah kandungan terperinci Bagaimanakah uniapp menentukan sama ada log masuk pengguna telah tamat tempoh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!