NuxtJs - 无法读取属性'标题'未定义的

时间:2018-05-15 20:12:52

标签: authentication cookies vue.js ssr

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

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

这是新公司的第一个项目,所以我试图证明自己。请帮帮我。你愿意。

Click here for image that shows the error that appears after 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

middleware / authenticated.js文件

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

middleware / notAuthenticated.js file

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

login.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;
          });
},

1 个答案:

答案 0 :(得分:0)

根据Nuxt Docs 要求,在 nuxt generate 上不可用。 您应该使用 nuxt build ,然后使用 nuxt start