Parlons de la façon d'encapsuler le jugement sur l'état de connexion sans utiliser Vuex

Cet article vous montrera comment utiliser l'encapsulation simple pour déterminer l'état de connexion sans utiliser la gestion de l'état Vuex. J'espère que cela vous sera utile !

Il y aura certainement un jugement sur le statut de connexion de l'utilisateur dans le projet, nous devons donc encapsuler le jugement sur le statut de connexion pour répondre à l'application de l'ensemble du projet. Bien sûr, si nous n'utilisons pas l'encapsulation, cela. entraînera un couplage élevé, une redondance du code, etc. Par conséquent, la gestion de l'état vuex peut souvent être utilisée dans les projets pour stocker l'état de connexion. Si le projet n'utilise pas la gestion de l'état, une simple encapsulation peut être utilisée pour déterminer l'état de connexion. [Recommandations associées : Tutoriel vidéo vue.js]

Encapsulation du statut de connexion

Si nous voulons encapsuler le statut de connexion normalement, nous avons besoin de deux fonctions, à savoir getToken pour obtenir le jeton stocké et utilisez Pour utiliser le jeton pour déterminer s'il faut se connecter isLogin, nous devons créer un nouveau dossier dans le répertoire src, ou créer un nouveau auth.js dans le répertoire de fichiers où nous encapsulons la demande. 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

Pour obtenir le jeton, il vous suffit d'utiliser localStorage pour obtenir le jeton et le renvoyer à la valeur de la fonction

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

isLogin

Pour déterminer la connexion, il vous suffit d'obtenir la valeur du jeton en appelant getToken pour renvoyer une valeur booléenne afin de déterminer si l'utilisateur est connecté inrrreee

De plus, GetToken devra être utilisé à d'autres endroits, par exemple, la valeur du jeton devra être transférée vers l'en-tête de la requête, etc.🎜

🎜Comment l'utiliser🎜🎜🎜Nous pouvons l'utiliser directement sur la page que nous voulons utiliser. Il suffit de l'introduire. Par exemple, ici, nous introduisons uniquement isLogin🎜rrreee🎜Après l'introduction, quelqu'un a demandé, devrait. nous utilisons if else ? nonono, faible, caché Le score est faible, jetons un coup d'œil à ma prochaine opération 🎜rrreee🎜 Notez ici que nous devons faire attention à la position de déclenchement de notre jugement de statut de connexion .C'est généralement lorsque monté, c'est-à-dire qu'il est généralement complété sur la page d'initialisation. L'état de connexion est jugé dans le hook suivant, qui est généralement l'endroit où se trouve la fonction de demande d'informations sur la page. situé. 🎜🎜De plus, la façon dont je l'écris ici est ?: pour faire un jugement sur le déclenchement de la fonction. Normalement, de nombreuses personnes peuvent utiliser if, d'ailleurs, ici Le composant d'invite. est un élément et vous pouvez apporter différentes modifications en fonction des invites de votre propre bibliothèque de composants. 🎜🎜🎜setToken🎜🎜🎜Puisque getToken est encapsulé, alors setToken doit être encapsulé pour plus de commodité 🎜rrreee🎜 (Partage de vidéos d'apprentissage : 🎜tutoriel web front-end🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!