So implementieren Sie die Login-Registrierung und Token-Überprüfung mit Vue

Auf der Vue-Einzelseite können wir das Routenobjekt überwachen, die Informationen daraus abgleichen, um zu entscheiden, ob das Token überprüft werden soll, und dann nachfolgende Verhaltensweisen definieren. Im Folgenden finden Sie einen Beispielcode, um die Vue-Login-Registrierungs- und Token-Verifizierungsfunktionen mit Ihnen zu teilen. Freunde, die ihn benötigen, können darauf verweisen

Auf den meisten Websites wird die Login-Registrierung durch die Kombination von lokalen Speichercookies, localStorage und Anfrage erreicht -Zeitverifizierungstoken usw. Technologie. Bei einigen Funktionsseiten wird versucht, das Token zur Beurteilung im lokalen Speicher abzurufen. Wenn es vorhanden ist, können Sie es eingeben, andernfalls wird zur Anmeldeseite gesprungen oder das Anmeldefeld geöffnet.

Auf der Vue-Einzelseite können wir das Routenobjekt überwachen, die Informationen abgleichen, um zu entscheiden, ob das Token überprüft werden soll, und dann nachfolgende Verhaltensweisen definieren.

Der spezifische Implementierungscode lautet wie folgt:

1. Verwenden Sie den router.beforeEach-Hook, um zu bestimmen, ob die Zielroute relevante Metainformationen trägt

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
 {
  path: '/',
  component: require('./views/Home'),
  meta: {
   requiresAuth: true
  }
 },
]
const router = new VueRouter({
 routes: routes
})
router.beforeEach((to, from, next) => {
 let token = window.localStorage.getItem('token') 
 if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
  next({
   path: '/login',
   query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
})
export default router

2. Routenobjekt beobachten. Das Prinzip ist das gleiche wie oben.

<script>
  // App.vue
  export default {
    watch:{
      &#39;$route&#39;:function(to,from){
        let token = window.localStorage.getItem(&#39;token&#39;);
　　　　　　　　  if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
　　　　　　　　　　  next({
 　　　　　　　　　　  path: &#39;/login&#39;,
 　　　　　　　　　　  query: { redirect: to.fullPath }
　　　　　　　　　　  })
　　　　　　　　  } else {
　　　　　　     next()
　　　　　　　　  }
   　　　}
  　　}
  }
</script>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erzielen Sie einen Vorschaueffekt in JS

Verwenden Sie three.js, um ein Projekt zu erstellen

So verwenden Sie die ES6-Syntax in Node (ausführliches Tutorial)

Detaillierte Einführung in die Verwendung dieses Objekts in js

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