Vue.js, отправьте значение из компонента в router / index.js

Question

Я пытаюсь отправить значение JWT token из компонента Login.vue и проверить его в router/index.js перед тем, как перенаправить пользователя на следующую страницу.

Login.vue:

<script>
import axios from "axios"; 

export default {
  name: "Login",      
  methods: {
    login() {

      let userDetails = {
        'Username' : this.email,
        'Password' : this.password
      }
      axios       
        .post('https://localhost:44349/api/Token/CreateToken',userDetails)
        .then((response) => {      
            this.token  = response.data.token 
            this.$router.push({
                name:'Books', 
                params:{token:this.token}}) // <--- send Token
        })
        .catch((error) => {
            console.log(error)
        });
    }
  }
};
</script>

router / index.js

const router = new Router({    
  routes: [    
    {
      path: '/books',
      name: 'books',
      component: Books,
      props: true,      
       meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
});


router.beforeEach((to, form, next) => {
  if (to.matched.some(rec => rec.meta.requiresAuth)) {   

    let isTokenValid= ??; // how to get the token?    

    if (isTokenValid) {        
       next();
    } 
    else {          
      next({ name: 'Login' });
    }
  }  
});

export default router 

Answer 1

Я использовал localstorage для хранения токена.В качестве альтернативы вы можете использовать vuex для хранения, следуйте этой аутентификации с использованием Vuex

  .then((response) => {  
      this.token  = response.data.token 
       localStorage.setItem('user-token', this.token);
        this.$router.push({
            name:'Books', 
            }) // <--- send Token
    }).catch(){
        localStorage.removeItem('user-token');
    }