Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to encapsulate login status judgment without using Vuex

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to encapsulate login status judgment without using Vuex". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to encapsulate login status judgment without using Vuex".

There must be user login status judgment in the project, so we need to encapsulate and judge the login status to meet the application of the whole project. Of course, if no encapsulation is just used, it will result in high coupling and code redundancy. Vuex state management may be often used to store login status in the project, so if the project does not need state management, you can use a simple encapsulation to determine the login status.

Login status encapsulation

If we want to encapsulate the login status, we need two functions, namely, the getToken of the stored token and the isLogin that uses token to determine whether to log in. We need to create a new folder under the src directory or a new auth.js under the file directory we encapsulated the request.

GetToken

To get token, you only need to get the token by using localStorage and return the function value

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

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

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

In addition, there will be other places in the project to use getToken, such as transferring the value of token in the request header.

Usage

We can directly import it on demand in the page to be used. For example, here we only introduce isLogin.

Import {isLogin} from "@ / request/auth"

After the introduction, someone asked, do we judge to use if else, nonono, is low, the hiding score is low, let's take a look at my next operation.

Mounted () {/ / login judgment, start isLogin () after the project runs successfully? Console.log ("isLogin"): (console.log ("Need to login"), this.$message.error ('not logged in'), this.$router.push ("/ login");}

Note that the trigger location of our login status judgment needs to be noted. It is usually in the mounted, that is, the login status is judged in the hook after the initialization page is completed. This is also the location of the request function for the page to obtain information.

In addition, what I write here is?: to determine the trigger of a function. Normally, many people will use if. By the way, the prompt component here is element, and you can make different changes according to the prompts of your own component library.

SetToken

Since the getToken is encapsulated, it must be packaged with a setToken for convenience.

Export function setToken (token) {return localStorage.setItem ("token", token);} Thank you for your reading. The above is the content of "how to encapsulate login status judgment without using Vuex". After the study of this article, I believe you have a deeper understanding of how to encapsulate login status judgment without using Vuex. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report