Adakah vue mempunyai tamat masa secara lalai?

Vue ialah rangka kerja JavaScript popular yang memudahkan pembangun membina aplikasi web yang dinamik dan responsif. Vue menyediakan sistem komponen yang berkuasa dan beberapa ciri berguna seperti cangkuk kitaran hayat dan pengikatan data reaktif. Dalam Vue, tamat masa bukanlah fungsi terbina dalam, tetapi ia boleh dilaksanakan dengan menggunakan pemasa, pengawal penghalaan, pemintas HTTP dan teknologi lain.

Pertama, mari kita fahami apa itu tamat masa. Tamat masa merujuk kepada kaedah mengganggu atau menutup operasi secara paksa apabila tiada tindak balas atau penyiapan operasi dalam tempoh masa tertentu. Dalam aplikasi web, tamat masa sering digunakan untuk memastikan pengguna tidak kekal log masuk atau meminta data untuk tempoh masa yang panjang tanpa aktiviti.

Dalam Vue, kita boleh menggunakan fungsi setTimeout JavaScript untuk mensimulasikan fungsi tamat masa. Fungsi setTimeout boleh melaksanakan fungsi selepas tempoh masa tertentu. Sebagai contoh, kami boleh memulakan pemasa selepas pengguna log masuk, dan jika pengguna tidak aktif selama lebih daripada tempoh masa yang ditetapkan, kami boleh log keluar pengguna secara automatik dan kembali ke halaman log masuk.

created () {
  this.timer = setTimeout(() => {
    this.logout()
  }, 30 * 60 * 1000) // 30分钟后超时
},
methods: {
  resetTimer () {
    clearTimeout(this.timer)
    this.created()
  },
  logout () {
    // 执行登出操作
  }
},

Dalam kod di atas, kami memulakan pemasa dalam cangkuk kitaran hayat yang dibuat oleh komponen Apabila pengguna melakukan sebarang operasi, kami boleh menetapkan semula pemasa dengan memanggil kaedah resetTimer. Jika pemasa tamat, kaedah log keluar dipanggil secara automatik untuk melaksanakan operasi log keluar.

Selain menggunakan pemasa untuk mensimulasikan tamat masa, Vue juga menyediakan pengawal penghalaan untuk melindungi akses kepada halaman penghalaan. Pengawal laluan ialah fungsi yang dilaksanakan semasa navigasi laluan dan boleh digunakan untuk mengawal akses laluan atau melakukan beberapa operasi. Dalam Vue, pengawal laluan termasuk pengawal hadapan global, pengawal pos global dan pengawal dalam komponen.

router.beforeEach((to, from, next) => {
  const logged = sessionStorage.getItem('logged')
  if (!logged && to.path !== '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

Dalam kod di atas, kami menggunakan pengawal hadapan global untuk menyemak status log masuk. Jika pengguna tidak log masuk dan tidak melawat halaman log masuk, ia akan melompat ke halaman log masuk secara automatik.

Selain pengawal laluan, Vue juga menyediakan pemintas HTTP untuk mengendalikan permintaan dan respons. Kita boleh menambah parameter tamat masa dalam pengepala permintaan atau menyemak status tamat masa dengan memintas respons.

axios.interceptors.request.use(config => {
  config.timeout = 10000 // 设置超时时间为10s
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  const { status } = response
  if (status === 408) {
    // 超时处理逻辑
  }
  return response;
})

Dalam kod di atas, kami menggunakan pemintas HTTP untuk menetapkan tamat masa sebelum permintaan dan menyemak sama ada kod status ialah status tamat masa 408 dalam pemintas respons.

Ringkasnya, Vue sendiri tidak mempunyai fungsi tamat masa terbina dalam, tetapi ia boleh disimulasikan dan dilaksanakan dengan menggunakan pemasa, pengawal laluan, pemintas HTTP dan teknologi lain. Teknologi ini boleh membantu kami melaksanakan aplikasi web yang lebih selamat dan boleh dipercayai.

Atas ialah kandungan terperinci Adakah vue mempunyai tamat masa secara lalai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!