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

This article introduces the relevant knowledge of "how to realize login status judgment package of non-Vuex". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

login state encapsulation

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

getToken

To get a token, you just need to get the token and return it to the function value by using localStorage

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

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

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

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

use method

We can introduce it directly on demand in the page we want to use, for example, here we only introduce isLogin

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

After the introduction, someone asked, we judge if else, nonono, low, hidden score low, let's see my following operation

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

Note that here, we need to pay attention to the trigger position of the login status judgment, generally when mounted, that is, generally in the hook after the completion of the initialization page to determine the login status, here is generally also the page to obtain information request function position.

And besides, I'm writing it like?:, To make function trigger judgment, normally many people may use if, right, the prompt component here is element, you can make different changes according to the prompt of your own component library.

setToken

Since getToken is encapsulated, it is definitely necessary to encapsulate a setToken again, also for convenience

export function setToken(token) { return localStorage.setItem("token", token);} That's all for the content of "How to implement login status judgment encapsulation for non-Vuex". Thank you for reading it. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.