Lassen Sie uns darüber sprechen, wie Sie die Beurteilung des Anmeldestatus ohne Verwendung von Vuex kapseln können

Dieser Artikel zeigt Ihnen, wie Sie mithilfe der einfachen Kapselung den Anmeldestatus ermitteln können, ohne die Vuex-Statusverwaltung zu verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Es wird definitiv eine Beurteilung des Benutzer-Anmeldestatus im Projekt geben, daher müssen wir die Beurteilung des Anmeldestatus kapseln, um die Anwendung des gesamten Projekts zu erfüllen. Dies führt zu hoher Kopplung, Code-Redundanz usw. Daher kann in Projekten häufig die Vuex-Statusverwaltung zum Speichern des Anmeldestatus verwendet werden. Wenn das Projekt keine Statusverwaltung verwendet, kann eine einfache Kapselung verwendet werden, um den Anmeldestatus zu ermitteln . [Verwandte Empfehlungen: vue.js Video-Tutorial]

Kapselung des Anmeldestatus

Wenn wir den Anmeldestatus normal kapseln möchten, benötigen wir zwei Funktionen, nämlich getToken, um das gespeicherte Token zu erhalten und verwenden Um mithilfe des Tokens zu bestimmen, ob isLogin angemeldet werden soll, müssen wir einen neuen Ordner im src-Verzeichnis oder eine neue auth.js im Dateiverzeichnis erstellen wo wir die Anfrage kapseln. getToken和使用token判断是否登录的isLogin,我们需要在src目录下新建一个文件夹，又或者在我们封装请求的文件目录下新建一个auth.js即可。

getToken

获取token的话只需要通过使用localStorage取得token并返回给函数值

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

isLogin

判断登录的话仅仅需要通过调用getToken获得token的值来返回布尔值从而判断用户是否登录

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

除此之外，项目中还会有别的地方要使用到getToken，比如说在请求头中需要转入token的值等

使用方法

我们在要使用的页面中直接按需引入即可，比如说这里我们只引进isLogin

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

在引入之后，有人就问了，我们判断用if else吗，nonono，低了，隐藏分低了，来看我下面的操作

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

注意到这里，我们的登录状态判断的触发位置需要注意一下，一般是在mounted的时候，即一般是在初始化页面完成后的钩子中进行登录状态的判断，这里一般也是页面获取信息的请求函数的位置。

除此之外，我这里的写法是?:，来进行函数触发判断的，正常来讲可能很多人会使用if

getToken

Um das Token zu erhalten, müssen Sie nur localStorage verwenden, um das Token abzurufen und es auf den Funktionswert zurückzusetzen

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

isLogin

Um die Anmeldung zu ermitteln, müssen Sie nur den Token-Wert abrufen, indem Sie getToken aufrufen, um einen booleschen Wert zurückzugeben, um zu bestimmen, ob der Benutzer angemeldet ist imrrreee

Darüber hinaus muss GetToken an anderen Stellen verwendet werden, beispielsweise muss der Wert des Tokens in den Anforderungsheader usw. übertragen werden.🎜

🎜Wie man es benutzt🎜🎜🎜Wir können es direkt auf der Seite verwenden, die wir verwenden möchten. Stellen Sie es beispielsweise nur vor: isLogin🎜rrreee🎜Nach der Einführung fragte jemand Wir verwenden if else? Nonono, Low, Hidden Die Punktzahl ist niedrig, schauen wir uns meine nächste Operation an 🎜rrreee🎜 Beachten Sie hier, dass wir auf die auslösende Position unserer Anmeldestatusbeurteilung achten müssen . Es wird normalerweise beim mounten verwendet, d gelegen. 🎜🎜Außerdem ist die Art und Weise, wie ich es hier schreibe, ?:, um die Funktion auszulösen. Normalerweise verwenden viele Leute hier übrigens if Die Eingabeaufforderungskomponente ist ein Element, und Sie können entsprechend den Eingabeaufforderungen Ihrer eigenen Komponentenbibliothek verschiedene Änderungen vornehmen. 🎜🎜🎜setToken🎜🎜🎜Da getToken gekapselt ist, muss setToken der Einfachheit halber gekapselt werden 🎜rrreee🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie die Beurteilung des Anmeldestatus ohne Verwendung von Vuex kapseln können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!