So implementieren Sie die Anmeldeüberprüfung mit Vue

Was ich Ihnen dieses Mal mitbringe, ist die Verwendung von Vue zur Implementierung der Anmeldebestätigung. Ich habe das Anmeldeproblem zu Beginn nicht berücksichtigt, nachdem ich es gelesen habe Von einigen Leuten geteilte Logins. Es fühlt sich alles so großartig an, deshalb werde ich Ihnen in diesem Artikel eine gute Analyse geben.

Eingesetzte Technologie:

vue

vue-router

vuex

Zunächst einmal ist klar, dass es sich bei vue um eine Seite handelt -Schreibtool-Framework: Wenn Sie sich in der Vergangenheit angemeldet haben, kann das Backend den Anmeldestatus steuern und die Anmeldeinformationen werden im Cookie abgelegt. Das Front-End kann auch eine Anmeldeüberprüfung durchführen, die hauptsächlich auf der Funktion der Einführung von Routing auf der Seite basiert.

Es gibt einen Hook in der Vue-Router--Funktion beforeEach (Navigationswache) Was für ein herrschsüchtiger Name, also ist der Name YY, weil dies mein Zuhause ist. Wenn Sie meine Einladungskarte nicht haben, verschwinden Sie hier. Sie möchten mit mir vorbeikommen und Lehrer Cang sehen. beforeEach akzeptiert drei Parameter (to, from, als nächstes) sind: wohin der Typ geht, von: woher der Typ kommt, als nächstes: schöne Dame, bitte kommen Sie herein, achten Sie auf die rutschige Straße. Im Moment denken Sie, dass das, was ich geschrieben habe, sehr anschaulich ist. Wenn Sie unzufrieden sind, lesen Sie das Dokument. Ah!

Vor allem verstehen, dann können wir die Dinge unterscheiden. Die Grundidee ist:

Ich möchte die Quellinformationen des Meta-Benutzers aus den Informationen des Routers erhalten. Wenn nicht, lassen Sie diesen Verlierer verschwinden und auf eine schönere Weise zurückkommen (das heißt, melden Sie sich an)

Wenn keine Quelleninformationen vorhanden sind, warten Sie einfach, um zur igeekbar zu springen Schauen Sie vorbei und holen Sie sich den Eingabekreis (das heißt, Sie erhalten nach dem Anmelden das Rückgabeergebnis und speichern es in den Quellinformationen des Routers, die zur Überprüfung nachfolgender Routensprünge verwendet werden)

Als ich das schreibe, habe ich plötzlich das Gefühl, dass es so aussieht, als wüsste es jeder. Machen Sie sich nicht so viele Gedanken über das Schreiben, denken Sie einfach, Sie sind ein Anfänger (hahaha)

Der Code ist direkt unten:

Fügen Sie den Code in router.js hinzu

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

Einheitliche Verarbeitungsschnittstellendatei 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)
   })
  }
 })
}

Ich glaube Nachdem Sie die obige Einführung gelesen haben, beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website anderen verwandten Artikeln!

Verwandte Lektüre:

So verwenden Sie Bubbling-Ereignisse in JS

So verwenden Sie das Klassenattribut in JS

So implementieren Sie AJAX und JSONP mit nativem JS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anmeldeüberprüfung mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!