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)

// 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()
 }
})

// 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)
   })
  }
 })
}

autres articles connexes !

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!