Mari kita bincangkan tentang cara merangkum pertimbangan status log masuk tanpa menggunakan Vuex

Artikel ini akan menunjukkan kepada anda cara menggunakan enkapsulasi mudah untuk menentukan status log masuk tanpa menggunakan pengurusan keadaan Vuex. Saya harap ia akan membantu anda!

Pasti akan ada pertimbangan status log masuk pengguna dalam projek, jadi kami perlu merangkum pertimbangan status log masuk untuk memenuhi aplikasi keseluruhan projek , jika kita tidak menggunakan enkapsulasi tadi, Ia akan menyebabkan gandingan tinggi, redundansi kod dan akibat lain Dalam projek, pengurusan status vuex mungkin sering digunakan untuk menyimpan status log masuk Jika projek tidak menggunakan pengurusan status, maka enkapsulasi mudah boleh digunakan untuk menilai status log masuk. [Cadangan berkaitan: tutorial video vue.js]

Pengenkapsulan status log masuk

Jika kami ingin merangkum status log masuk seperti biasa, kami memerlukan dua Fungsi Iaitu, untuk mendapatkan getToken token yang disimpan dan isLogin menggunakan token untuk menentukan sama ada untuk log masuk, kita perlu mencipta folder baharu dalam direktori src, atau mencipta auth.js baharu dalam direktori fail tempat kami merangkum permintaan itu.

getToken

Untuk mendapatkan token, anda hanya perlu menggunakan localStorage untuk mendapatkan token dan mengembalikannya kepada nilai fungsi

export function getToken() {
  return localStorage.getItem("token");
}

isLogin

Untuk menentukan log masuk, anda hanya perlu mendapatkan nilai token dengan memanggil getToken untuk mengembalikan nilai Boolean untuk menentukan sama ada pengguna log masuk

export function isLogin() {
  if (getToken()) {
    return true;
  }
  return false;
}

Selain itu, akan ada GetToken yang perlu digunakan di tempat lain, contohnya, nilai token perlu dipindahkan ke pengepala permintaan, dll.

Cara menggunakannya

Kami klik terus pada halaman yang ingin digunakan Ia hanya perlu diperkenalkan sebagai contoh, di sini kami hanya memperkenalkan isLogin

import { isLogin } from "@/request/auth";

bertanya, patutkah kita menggunakan if else? Nonono, ia adalah rendah, skor tersembunyi adalah rendah. penghakiman status log masuk kami Ia biasanya pada masa

, iaitu, ia biasanya cangkuk selepas halaman permulaan selesai maklumat pada halaman.

mounted() {
    // 登录判断，项目成功运行后启动
    isLogin()
      ? console.log("isLogin")
      : (console.log("Need to login"),
        this.$message.error('未登录'),
        this.$router.push("/login")
      );
  },

Di samping itu, cara saya menulisnya di sini ialah mounted untuk menilai pencetus fungsi Biasanya, ramai orang boleh menggunakan

komponen gesaan di sini adalah elemen perubahan yang berbeza mengikut gesaan pustaka komponen anda sendiri.

?:ifsetToken

Memandangkan getToken dikapsulkan, anda mesti merangkum setToken sekali lagi untuk kemudahan

(Perkongsian video pembelajaran:

Di hadapan web -tamat tutorial

export function setToken(token) {
  return localStorage.setItem("token", token);
}

)

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara merangkum pertimbangan status log masuk tanpa menggunakan Vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!