javascript - Vue.js，将值从组件发送到 router/index.js

Question

我正在尝试JWT token从组件发送一个值并在将用户重定向到下一页之前Login.vue对其进行验证。router/index.js

登录.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>

路由器/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 

标签： javascriptvue.jsvuejs2

Answer 1

我使用本地存储来存储令牌。或者，您可以使用 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');
    }