Let's talk about how to encapsulate login status judgment without using Vuex

This article will show you how to use simple encapsulation to determine the login status without using Vuex state management. I hope it will be helpful to everyone!

In the project, there will definitely be a judgment of user login status, so we need to encapsulate the judgment of login status to meet the application of the entire project. Of course, if we don’t use encapsulation just now, It will cause high coupling, code redundancy and other consequences. In projects, vuex status management may often be used to store login status. If the project does not use status management, then simple encapsulation can be used to judge the login status. . [Related recommendations: vue.js video tutorial]

Login status encapsulation

If we want to encapsulate the login status normally, we need two functions That is, getToken to obtain the stored token and isLogin to use the token to determine whether to log in. We need to create a new folder in the src directory, or create a new folder in the file directory where we encapsulate the request. A auth.js is enough.

getToken

To obtain the token, you only need to use localStorage to obtain the token and return it to the function value

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

isLogin

To determine login, you only need to get the token value by calling getToken to return a Boolean value to determine whether the user is logged in

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

In addition, the project There will be other places where getToken is used, for example, the value of token needs to be transferred into the request header, etc.

Usage method

What we are going to use You can directly import it into the page on demand. For example, here we only import isLogin

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

. After the introduction, someone asked, should we use if else? , nonono, it’s low, the hidden score is low, let’s take a look at my following operations

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

Notice here, we need to pay attention to the trigger position of our login status judgment, usually at mounted When, that is, the login status is generally judged in the hook after the initialization page is completed. This is generally the location of the request function for obtaining information on the page.

In addition, the way I write it here is ?:, to judge the function trigger. Normally, many people may use if, by the way. , the prompt component here is element, you can make different changes according to the prompts of your own component library.

setToken

Since getToken is encapsulated, then setToken must be encapsulated again for convenience

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

(Learning video sharing: webfrontendtutorial)

The above is the detailed content of Let's talk about how to encapsulate login status judgment without using Vuex. For more information, please follow other related articles on the PHP Chinese website!