Question

下面是我在router/index.js中拥有的代码

Vue.use(Router)

let router =  new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: { 
          guest: true
      }
    },
    {
        path: "/login",
        name: "login",
        component: LoginComponent,
        meta: { 
            guest: true
        }
    },
    {
        path: "/secure",
        name: "secure",
        component: SecureComponent,
        meta: { 
            requiresAuth: true
        }
    },
    {
        path: "/kelas",
        name: "kelas",
        component: KelasComponent,
        meta: { 
            requiresAuth: true
        }
    }
  ]
})


router.beforeEach((to, from, next) => {

    const record = to.matched.some(record => record.meta.requiresAuth);
    console.log("record: ")
    console.log(record)

    if(record) {
        console.log(localStorage.getItem('jwtToken'))
      if (localStorage.getItem('jwtToken') == null) {
        next({
          path: '/login',
          params: { nextUrl: to.fullPath }
        })
      } else {           
        next()
      }
    } else if(to.matched.some(record => record.meta.guest)) {
          if(localStorage.getItem('jwtToken') == null){
              next()
          }
          else{
              next()
          }
      }else {
      next() 
    }
  })

export default router

在我的components/Login.vue中，我的情况如下：

<template>
    <section id="login">
        <h1>Login</h1>
        <form @submit="onSubmit">
            <b-field label=""
                type="is-warning"
                message="Please enter a valid email">
                <b-input type="email" name="email" v-model="input.email" placeholder="E-mail"></b-input>
            </b-field>
            <b-field label=""
                type="is-warning"
                message="Please enter your password">
                <b-input type="password" name="password" v-model="input.password" placeholder="Password"></b-input>
            </b-field>

            <input type="password" name="password" v-model="input.password" placeholder="Password" />-->
            <b-field :message="errors"
                type="is-danger"
                name="errors"
                >
                <!--<button type="button" v-on:click="login()" class="button">Login</button>-->
                <button type="submit" class="button">Login</button>
            </b-field>
        </form>
    </section>
</template>

<script>

    import axios from 'axios'

    export default {
        name: 'Login',
        data () {
            return {
                input: {
                    email: "",
                    password: ""
                },
                result : "",
                errors: []
            }
        },
        methods: {
            onSubmit (evt) {
                evt.preventDefault()
                if(this.input.email != "" && this.input.password != "") {

                    axios.post('http://localhost:8081/api/auth/login', this.input)
                    .then(response => {
                        localStorage.setItem('user',JSON.stringify(response.data.user))
                        localStorage.setItem('jwtToken', response.data.token)                        
                        if (localStorage.getItem('jwtToken') != null){     

                            this.$emit("authenticated", true)
                            this.$emit('loggedIn')                
                            if(this.$route.params.nextUrl != null){         
                                this.$router.push(this.$route.params.nextUrl)         
                            }
                            else {         
                                this.$router.push('secure')                                
                            }
                        }
                    })
                    .catch(e => {
                        console.log(e.response)
                        if(e.response.status === 401) {
                            this.errors.push("Invalid login")
                        }else{
                            this.errors.push(e)
                        }
                    })
                } else {
                    this.result = "An email and password must be present"
                    console.log("An email and password must be present")
                }
            }
        }
    }
</script>

我上面的代码效果很好。在secure.vue页面中，我可以单击一个按钮，该按钮可以打开kelas.vue页面，没有任何问题。但是，当我尝试刷新页面secure或kelas时，它将把我带回到页面login。

通过console.log，我可以看到jwttoken和to.matched.some(record => record.meta.requiresAuth);的值仍然存在；唯一的区别是，当我重新加载时，在from行的router.beforeEach((to, from, next) => {变为空。

在用户重新加载/刷新页面后，有什么方法可以使用户仍然登录？似乎vue的“默认”行为是用户无意重新加载/刷新页面。还是我在这里错过了一些东西？

Answer 1

我的坏人。在我的app.vue中，我有以下代码，这是导致重新引导我重新登录页面刷新的罪魁祸首。删除下面的代码可以解决我的问题。

mounted() {
    if(!this.authenticated) {
        this.$router.replace({ name: "login" })
    }
},
methods: {
    setAuthenticated (status) {
        this.authenticated = status
    },
    logout () {
        this.authenticated = false
    }
}

我想一次尝试遵循多个vue nodejs身份验证教程时，这就是问题之一

如果重新加载页面，vuejs用户将退出

1 个答案: