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!