用户通过登录表单成功登录我的应用程序后。我想检查他们是否有个人资料。如果他们 做我想将它们发送到新闻页面。如果他们 不要有一套,我希望它将它们重定向到“设置”页面。我将如何使用 Vuex 来做到这一点?
我想有几个选择:
1. 负责重定向的组件? (感觉不对)
登录.vue
handleFormSubmit () {
this.$store.dispatch('loginFormSubmit', formData)
.then(() => {
// This feels a bit gross
this.$store.dispatch('getUserProfile')
.then(() => this.$router.push('/news'))
.catch(() => this.$router.push('/settings'))
})
.catch(() => {
this.loginError = true
})
}
2. 我会在行动中承担责任吗?
用户操作.js
export const getUserProfile = ({commit}) => {
commit(types.USER_PROFILE_REQUEST)
const options = {
url: `${API_URL}/profile`,
method: 'GET'
}
return request(options)
.then((profileSettings) => {
// Would I change the router to News here??
commit(types.USER_PROFILE_SUCCESS, profileSettings)
return Promise.resolve(profileSettings)
})
.catch((error) => {
// Would I change the router to Settings here??
commit(types.UI_MENU_HIDE)
return Promise.reject(error)
})
}
export const loginFormSubmit = ({dispatch, commit}, { email, password }) => {
console.log(email, password)
commit(types.USER_LOGIN_REQUEST)
const options = {
url: `${API_URL}/token`
}
return request(options)
.then((response) => {
dispatch('getUserProfile')
commit(types.USER_LOGIN_SUCCESS, response.token)
return Promise.resolve(response.token)
})
.catch((error) => {
commit(types.USER_LOGIN_FAILURE, error)
return Promise.reject(error)
})
}
3. 或许应该放在带防护罩的路由器里?
登录.vue
handleFormSubmit () {
this.$store.dispatch('loginFormSubmit', formData)
.then(() => this.$router.push('/news'))
.catch(() => {
this.loginError = true
})
}
然后在我的路由器中:
const routes = [
{
path: 'news',
alias: '',
component: NewsView,
name: 'News',
meta: { description: 'News feed page' },
beforeEnter: (to, from, next) => {
store.dispatch('getUserProfile')
- .then((resp) => {
- // Profile set
- next()
- })
- .catch(() => {
- // No profile set
- next({ name: 'settings' })
- })
}
},
]
4. 监听 store 变化,然后改变 route
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)
}
}
也许三四号最好?它感觉最干净,但很想知道你们的想法:D
感谢您提前抽出时间!
最佳答案
我认为您想要一个版本的想法#2。为什么不这样:
handleFormSubmit()
在 Login.vue
发送loginFormSubmit()
行动。也许在 Login.vue
中启用加载状态此时对于 UX。 getUserProfile()
, 否则在 Login.vue
中显示错误getUserProfile()
从 API response
从 API 在您的操作中或通过 response
到一个单独的突变来做到这一点。 state
和 router.push('/pathToNews')
, 否则 router.push('/pathToSettings')
这里是简化的伪代码来说明这个概念:
// store
state: {
userProfile: {}
},
mutations: {
setUserProfile (state, payload) {
state.userProfile = payload
}
},
actions: {
getUserProfile() {
let self = this
axios.get('${API_URL}/token')
.then(function (response) {
// test response against what is expected for a populated profile
if (response.data is a populated user profile) {
self.commit('setUserProfile', response.data)
self.router.push('/news')
} else {
self.router.push('/settings')
}
})
.catch(function (error) {
console.error(error);
// handle your error
})
.finally(function () {
// always executed
})
}
}
关于vuejs2 - 从 Vuex Action 和组件更改路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44801333/