How to use vue to implement login verification
What I bring to you this time is how to use vue to implement login verification. The login was added after I finished writing the project. I didn’t consider the login issue at the beginning. I added it later after reading the login shared by some people. It all feels so awesome, so I’ll give you a detailed analysis in this article.
Technology used:
vue
vue-router
vuex
First of all, it is clear that vue is a page-writing In the framework, when logging in in the past, the backend might control the login status and put the login information in cookie. The front end can also perform login verification, which is mainly realized based on the function of introducing routing on the page.
There is a hook in vue-routerFunction beforeEach (Navigation Guard) What a domineering name, so the name YY is because this is my home. If you don’t have my invitation card, get out of here. You want to come over and watch Teacher Cang with me. beforeEach accepts three parameters (to, from, next) are to: where the guy is going, from: where the guy is coming from, next: beautiful lady, please come in, be careful of the slippery road. For now, you think what I wrote is very vivid. If you feel dissatisfied, read the document. ah!
Understand beforeEach, then we can distinguish things. The basic idea is:
I want to get the meta user’s source information from the router’s information. If not, let this idiot go away and come back in a more handsome manner (that is, log in)
If there is no source information, just wait to jump to igeekbar Come and take a look, and get the entry circle (that is, after logging in, you get the return result and store it in the source information of the router, which is used for verification of subsequent route jumps)
Writing this, I suddenly feel that this looks like Everyone knows it, no matter how much you write, just think you are a novice (hahaha)
The code is directly below:
Add the code in router.js
// router.js
router.beforeEach((to, from, next) => {
if (!to.meta.user) {
// todo 请求接口获取数据
loadUserData().then(user => {
// 存放源信息
to.meta.user = user
// 存在 vuex 中
store.state.user = user
if(user){
next()
}else{
next({
path: '/'
})
}
})
} else {
next()
}
})Unified processing interface file api.js
// api.js
import axios from 'axios'
// 封装ajax 的 fetch
export let fetch = (method, url, data, forceLogin = true) => {
return new Promise((resolve, reject) => {
axios({
...data,
method: method,
url: url
}).then(response => {
resolve(response.data)
}).catch(err => {
reject(err)
})
})
}
// 获取用户信息
export let loadUserData = () => {
return new Promise((resolve, reject) => {
let user = null
let cacheKey = 'authUserJsonStr'
let authUserJsonStr = sessionStorage.getItem(cacheKey)
if (authUserJsonStr) {
user = JSON.parse(sessionStorage.getItem(cacheKey))
resolve(user)
} else {
fetch('GET', '/api/auth_info/', {}, false).then((data) => {
user = data
sessionStorage.setItem(cacheKey, JSON.stringify(user))
resolve(user)
}).catch(() => {
resolve(null)
})
}
})
}
I believe you have mastered the method after reading the above introduction, there are more exciting things Please pay attention to php Chinese websiteOther related articles!
Related reading:
How to use bubbling events in JS
How to use the class attribute in JS
How to implement AJAX and JSONP with native JS
The above is the detailed content of How to use vue to implement login verification. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I log in to my previous account on Xiaohongshu? What should I do if the original number is lost after it is reconnected?
Mar 21, 2024 pm 09:41 PM
With the rapid development of social media, Xiaohongshu has become a popular platform for many young people to share their lives and explore new products. During use, sometimes users may encounter difficulties logging into previous accounts. This article will discuss in detail how to solve the problem of logging into the old account on Xiaohongshu, and how to deal with the possibility of losing the original account after changing the binding. 1. How to log in to Xiaohongshu’s previous account? 1. Retrieve password and log in. If you do not log in to Xiaohongshu for a long time, your account may be recycled by the system. In order to restore access rights, you can try to log in to your account again by retrieving your password. The operation steps are as follows: (1) Open the Xiaohongshu App or official website and click the "Login" button. (2) Select "Retrieve Password". (3) Enter the mobile phone number you used when registering your account
What should I do if I download other people's wallpapers after logging into another account on wallpaperengine?
Mar 19, 2024 pm 02:00 PM
When you log in to someone else's steam account on your computer, and that other person's account happens to have wallpaper software, steam will automatically download the wallpapers subscribed to the other person's account after switching back to your own account. Users can solve this problem by turning off steam cloud synchronization. What to do if wallpaperengine downloads other people's wallpapers after logging into another account 1. Log in to your own steam account, find cloud synchronization in settings, and turn off steam cloud synchronization. 2. Log in to someone else's Steam account you logged in before, open the Wallpaper Creative Workshop, find the subscription content, and then cancel all subscriptions. (In case you cannot find the wallpaper in the future, you can collect it first and then cancel the subscription) 3. Switch back to your own steam
Detailed method to unblock using WeChat friend-assisted verification
Mar 25, 2024 pm 01:26 PM
1. After opening WeChat, click the search icon, enter WeChat team, and click the service below to enter. 2. After entering, click the self-service tool option in the lower left corner. 3. After clicking, in the options above, click the option of unblocking/appealing for auxiliary verification.
How to implement dual WeChat login on Huawei mobile phones?
Mar 24, 2024 am 11:27 AM
How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously
PHP Programming Guide: Methods to Implement Fibonacci Sequence
Mar 20, 2024 pm 04:54 PM
The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence
How to enter Baidu Netdisk web version? Baidu Netdisk web version login entrance
Mar 13, 2024 pm 04:58 PM
Baidu Netdisk can not only store various software resources, but also share them with others. It supports multi-terminal synchronization. If your computer does not have a client downloaded, you can choose to enter the web version. So how to log in to Baidu Netdisk web version? Let’s take a look at the detailed introduction. Baidu Netdisk web version login entrance: https://pan.baidu.com (copy the link to open in the browser) Software introduction 1. Sharing Provides file sharing function, users can organize files and share them with friends in need. 2. Cloud: It does not take up too much memory. Most files are saved in the cloud, effectively saving computer space. 3. Photo album: Supports the cloud photo album function, import photos to the cloud disk, and then organize them for everyone to view.
How to log in if Xiaohongshu only remembers the account? I just remember how to retrieve my account?
Mar 23, 2024 pm 05:31 PM
Xiaohongshu has now been integrated into the daily lives of many people, and its rich content and convenient operation methods make users enjoy it. Sometimes, we may forget the account password. It is really annoying to only remember the account but not be able to log in. 1. How to log in if Xiaohongshu only remembers the account? When we forget our password, we can log in to Xiaohongshu through the verification code on our mobile phone. The specific operations are as follows: 1. Open the Xiaohongshu App or the web version of Xiaohongshu; 2. Click the "Login" button and select "Account and Password Login"; 3. Click the "Forgot your password?" button; 4. Enter your account number. Click "Next"; 5. The system will send a verification code to your mobile phone, enter the verification code and click "OK"; 6. Set a new password and confirm. You can also use a third-party account (such as
How to solve the common problem of Laravel login time invalidation
Mar 06, 2024 pm 09:24 PM
How to solve the common problem of Laravel login time expiration When using Laravel to develop web applications, login authentication is a very important function. However, sometimes if a user does not operate for a long time after logging in, the page may automatically log out or the authentication may fail. This problem is relatively common. The following will introduce how to solve this problem by setting the session time and provide specific code examples. 1. Set the session expiration time in Laravel, by default sessi
