Comment implémenter l'enregistrement de connexion et la vérification des jetons à l'aide de vue

Dans la page unique de Vue, nous pouvons surveiller l'objet route, faire correspondre les informations qu'il contient pour décider s'il faut vérifier le jeton, puis définir les comportements ultérieurs. Ce qui suit est un exemple de code pour partager avec vous les fonctions d'enregistrement de connexion Vue et de vérification des jetons. Les amis qui en ont besoin peuvent s'y référer

Dans la plupart des sites Web, l'enregistrement de connexion est réalisé en combinant les cookies de stockage local, localStorage et request. -jetons de vérification du temps, etc. technologie. Pour certaines pages fonctionnelles, il tentera d'obtenir le jeton dans le stockage local pour jugement. S'il existe, vous pouvez entrer, sinon il accédera à la page de connexion ou affichera la boîte de connexion.

Dans la page unique de Vue, nous pouvons surveiller l'objet route, faire correspondre les informations qu'il contient pour décider s'il faut vérifier le jeton, puis définir les comportements ultérieurs.

Le code d'implémentation spécifique est le suivant :

1 Utilisez le hook router.beforeEach pour déterminer si la route cible contient des méta-informations pertinentes

// 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. Regarder l'objet itinéraire. Le principe est le même que ci-dessus.

<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>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment obtenir un effet d'aperçu en JS

Utilisez three.js pour créer un projet

Comment utiliser la syntaxe ES6 dans Node (tutoriel détaillé)

Introduction détaillée à l'utilisation de cet objet en js

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!