首页 > 解决方案 > NuxtJs - 无法读取未定义的属性“标题”

问题描述

我是 NuxtJs 的新手。我正在尝试使用 axios 实现一个外部 API 调用,我获取令牌并将其存储在 cookie 中。一切都在开发中运行良好。但是当我尝试运行 npm run generate 时,它​​给了我不知道该怎么做的错误。

当我删除 nuxtSeverInit 时,npm run generate 运行顺利。经过一些研究,我认为不应该使用我正在使用的 nuxtServerInit 。谁能告诉我如何使它工作。

这是新公司的第一个项目,所以我正在努力证明自己。请帮帮我。你会。

单击此处查看显示 npm run generate 后出现的错误的图像

这是 store/index.js 文件

  import Vuex from 'vuex'
  var cookieparser = require('cookieparser')

  const createStore = () => {
      return new Vuex.Store({
           state: {
              auth: null,
           },
           mutations: {
              update (state, data) {
                 state.auth = data
              }
           },
           actions: {
              nuxtServerInit ({ commit }, { req }) {
                     let accessToken = null
                     if (req.headers.cookie) {
                         var parsed = cookieparser.parse(req.headers.cookie)
                         if(parsed){
                            accessToken = parsed.auth
                         }

                      }  
                     commit('update', accessToken)
              },
           }
       })
   }
  export default createStore

中间件/authenticated.js 文件

   export default function ({ store, redirect }) {
      // If the user is not authenticated
      if (!store.state.auth) {
        return redirect('/login')
      }
   }

中间件/notAuthenticated.js 文件

   export default function ({ store, redirect }) {
      // If the user is authenticated redirect to home page
      if (store.state.auth) {
         return redirect('/app/dashboard')
      }
    }

登录.vue 文件

  validateBeforeSubmit() {
    this.$validator.validateAll().then((result) => {
      if (result) {
        this.button_title = 'One moment ...';
        let submitted_user_data = {
          'username': this.emailAddress,
          'client_id': this.user_uuid,
          'password': this.password,
        }

        MerchantServices.do_user_login(submitted_user_data)
        .then(response => {
            let access_token = response.data.access_token;
            this.postLogin(access_token);

        })
        .catch(error => {
            this.$refs.invalid_credentials.open();
            this.button_title = 'Sign in'
        });
        return;
      }


    });
  },
  postLogin: function(access_token_val) {
    if(access_token_val != ''){
      setTimeout(() => {
        const auth = {
          accessToken: access_token_val
        }
        this.$store.commit('update', auth) 
        Cookie.set('auth', auth) 
        this.$refs.invalid_credentials.open();
        this.button_title = 'Sign in'
        this.$router.push('/app/dashboard')
      }, 1000)
    }else{
      alert('hello')
    }

  },

最后一个用户登录 api 调用也返回令牌。

    do_user_login(user){
          var user_details = 'username='+user.username+'&client_id='+ user.client_id +'&grant_type=password&password='+user.password+''
          return axios.post('myapiurl', user_details )
         .then(response =>  {
             return response;
          });
},

标签: authenticationcookiesvue.jsserver-side-rendering

解决方案


根据Nuxt Docs reqnuxt generate上不可用。您应该使用nuxt build而不是nuxt start之后。


推荐阅读