Comment utiliser vue pour implémenter la vérification de connexion

Ce que je vous apporte cette fois, c'est comment utiliser vue pour implémenter la vérification de connexion. La connexion a été ajoutée après avoir fini d'écrire le projet. Je n'ai pas pris en compte le problème de connexion au début, je l'ai ajouté plus tard après avoir lu le projet. connexion partagée par certaines personnes. Tout cela semble tellement génial, je vais donc vous donner une bonne analyse dans cet article.

Technologie utilisée :

vue

vue-router

vuex

Tout d'abord, il est clair que vue est une page -outil d'écriture Framework, lors d'une connexion dans le passé, le backend peut contrôler l'état de connexion et les informations de connexion seront placées dans un cookie. Le frontal peut également effectuer une vérification de connexion, qui est principalement réalisée sur la base de la fonction d'introduction du routage sur la page.

Il y a un hook dans la fonction vue-router beforeEach (Garde de navigation) Quel nom dominateur, donc le nom YY est parce que c'est ma maison. Si vous n'avez pas ma carte d'invitation, sortez d'ici et vous voulez venir regarder Maître Cang avec moi. beforeEach accepte trois paramètres (vers, depuis, suivant) sont : où va le gars, d'où : d'où vient le gars, ensuite : belle dame, entrez s'il vous plaît, faites attention à la route glissante. Pour l’instant, vous pensez que ce que j’ai écrit est très vivant. Si vous n’êtes pas satisfait, lisez le document. ah !

Comprendre avantChacun, alors on pourra distinguer les choses. L'idée de base est la suivante :

Je veux obtenir les informations source du méta-utilisateur à partir des informations du routeur. Sinon, laissez ce perdant s'en aller et revenir d'une manière plus belle (c'est-à-dire se connecter)

S'il n'y a aucune information sur la source, attendez simplement pour accéder à igeekbar Venez jeter un œil et récupérez le cercle d'entrée (c'est-à-dire qu'après vous être connecté, vous obtenez le résultat du retour et le stockez dans les informations source du routeur, qui sont utilisées pour la vérification des sauts d'itinéraire ultérieurs)

En écrivant ceci, j'ai soudain l'impression que cela ressemble à tout le monde le sait, peu importe combien vous écrivez, pensez simplement que vous êtes un novice (hahaha)

Le code est directement en dessous :

Ajouter le code dans 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()
 }
})

Fichier d'interface de traitement unifié 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)
   })
  }
 })
}

Je crois que vous avez maîtrisé la méthode après avoir lu l'introduction ci-dessus , pour un contenu plus passionnant, veuillez faire attention au site Web chinois php

autres articles connexes !

Lecture connexe :

Comment utiliser les événements bouillonnants en JS

Comment utiliser l'attribut de classe en JS

Comment implémenter AJAX et JSONP avec du JS natif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!