title: Changing route from Vuex actions and components
body: <p>After a user has successfully logged into my app via a login form. I want to check if they have a profile. If they <strong>do</strong> I want to send them to News page. If they <strong>don't</strong> have one set, I want it to redirect them to the Settings page. How would I do this using Vuex? </p>
  
  <p>I guess there are a few options:</p>
  
  <h2>1. Components responsible for the redirects? (doesn't feel right)</h2>
  
  <p>Login.vue</p>
  
  <pre><code>handleFormSubmit () {
  this.$store.dispatch('loginFormSubmit', formData)
      .then(() =&gt; {
        // This feels a bit gross
        this.$store.dispatch('getUserProfile')
          .then(() =&gt; this.$router.push('/news'))
          .catch(() =&gt; this.$router.push('/settings'))
      })
      .catch(() =&gt; {
        this.loginError = true
      })
  }
  </code></pre>
  
  <h2>2. Would I keep the responsibility in the actions?</h2>
  
  <p>user-actions.js</p>
  
  <pre><code>export const getUserProfile = ({commit}) =&gt; {
    commit(types.USER_PROFILE_REQUEST)
    const options = {
      url: `${API_URL}/profile`,
      method: 'GET'
    }
  
    return request(options)
      .then((profileSettings) =&gt; {
        // Would I change the router to News here??
  
        commit(types.USER_PROFILE_SUCCESS, profileSettings)
        return Promise.resolve(profileSettings)
      })
      .catch((error) =&gt; {
        // Would I change the router to Settings here??
  
        commit(types.UI_MENU_HIDE)
        return Promise.reject(error)
      })
  }
  
  export const loginFormSubmit = ({dispatch, commit}, { email, password }) =&gt; {
    console.log(email, password)
    commit(types.USER_LOGIN_REQUEST)
    const options = {
      url: `${API_URL}/token`
    }
    return request(options)
      .then((response) =&gt; {
        dispatch('getUserProfile')
        commit(types.USER_LOGIN_SUCCESS, response.token)
        return Promise.resolve(response.token)
      })
      .catch((error) =&gt; {
        commit(types.USER_LOGIN_FAILURE, error)
        return Promise.reject(error)
      })
  }
  </code></pre>
  
  <h2>3. Maybe it should be kept in the router with guards?</h2>
  
  <p>Login.vue</p>
  
  <pre><code>handleFormSubmit () {
  this.$store.dispatch('loginFormSubmit', formData)
      .then(() =&gt; this.$router.push('/news'))
      .catch(() =&gt; {
        this.loginError = true
      })
  }
  </code></pre>
  
  <p>Then in my router:</p>
  
  <pre><code>const routes = [
        {
          path: 'news',
          alias: '',
          component: NewsView,
          name: 'News',
          meta: { description: 'News feed page' },
          beforeEnter: (to, from, next) =&gt; {
            store.dispatch('getUserProfile')
  -          .then((resp) =&gt; {
  -            // Profile set
  -            next()
  -          })
  -          .catch(() =&gt; {
  -            // No profile set
  -            next({ name: 'settings' })
  -          })
          }
        },
  ]
  </code></pre>
  
  <h2>4. Listen out for store change, then change route</h2>
  
  <pre><code>  computed: {
      isAuthenticated () {
        return this.$store.getters.isAuthenticated
      }
    },
  
    watch: {
      isAuthenticated () {
        this.$router.push('/calendar')
      }
    },
    methods: {
      handleSubmit (formData) {
        // Updates isAuthenticated on success
        this.$store.dispatch('requestAuthToken', formData)
      }
    }
  </code></pre>
  
  <p>Maybe number three or four is best? It feels the cleanest but would love to know what you guys think :D</p>
  
  <p>Thanks for taking the time in advance!</p>