Question

我不确定我是在做错事还是在某处有错字，但是我正在尝试比较vue项目中的日期，但是即使我看到该值，我从本地存储中提取的值也始终返回null当我检查本地存储时，显然存在。所以这里是设置。

发出请求后，像这样设置本地存储的过期日期

retrieveToken({ commit }, credentials) {

      return new Promise((resolve, reject) => {
          axios.post('/login', {
              username: credentials.username,
              password: credentials.password,
          })
          .then(response => {
              const token = response.data.access_token
              const date = new Date(moment().add(30, 'seconds').toDate());
              localStorage.setItem('expires_on', date)
              localStorage.setItem('access_token', token)
              resolve(response)
          })
          .catch(error => {
              console.log(error.response.data)
              reject(error)
          })
      })
    },

然后我可以看到expires on已放置在我的本地存储中

然后我想像这样使用吸气剂来获取该值

tokenExpires() {
      return localStorage.getItem('expires_on')
    },

所以我可以这样使用

computed: {
        ...mapGetters(['tokenExpires']),
    },
methods: {
     destroySessionIfTokenIsExpired() {
            const current = new Date(moment())
            const expires = this.tokenExpires
            const currentDate = moment(current).format('YYYYMMDDHHMMSS')
            const expiresDate = moment(expires).format('YYYYMMDDHHMMSS')
                console.log(this.tokenExpires)
                console.log(expiresDate)
            if(currentDate >= expiresDate) {
                this.$store.dispatch('destroyToken')
                .then(() => {
                    this.$router.push('/login')
                    alert('Your Session Has Expired, Please Log Back In')
                })
            } else return;
        }
       }

但是当我运行此方法和console.log（this.tokenExpires）时，它返回null，我不确定为什么。如果有人看到我在做什么错，请告诉我！！

*更新，我的问题是我试图观察路由并进行时间戳比较，以查看会话是否仍然有效，但指出，getter没有足够的时间来计算在该方法运行之前就已经值了，所以关于如何解决该问题的任何建议都很棒。这是路线监视方法

watch: {
        '$route': function(to, from) {
            this.destroySessionIfTokenIsExpired()
        }
    },

Answer 1

感谢@YongQuan我有此解决方案。

methods: {
        ...mapActions(['destroyToken']),
        destroySessionIfTokenIsExpired() {
            const expiresOn = localStorage.getItem('expires_on')
            const expiresDate = moment(expiresOn).format('YYYYMMDDHHMMSS')
            if(expiresOn == null) return;
            const current = new Date(moment())
            const currentDate = moment(current).format('YYYYMMDDHHMMSS')
            if(currentDate >= expiresDate) {
                this.$store.dispatch('destroyToken')
                this.$router.push('/login')
            } else return;
        }
    },
    watch: {
        '$route': function(to, from) {
            this.destroySessionIfTokenIsExpired()
        }
    },

我没有使用getter而是将`localStorage.getItem（'expires_on'）设置为方法内部的变量。谢谢@YongQuan

即使值存在，localStorage.getItem（）始终返回null

1 个答案: