在Vue.js应用程序中,你可能会使用导航守卫来根据用户的认证状态控制对不同路由的访问。如果用户尝试访问"/home"但尚未登录时,会在成功登录后通过导航守卫从"/login"重定向到"/home"。
以下是使用Vue Router中的beforeEach
导航守卫实现这一目标的示例:
import router from './router'
import store from './store'
router.beforeEach((to, from, next) => {
if (to.path === '/home') {
// 检查用户是否已认证(此逻辑取决于你的Vuex store或本地存储)
const isAuthenticated = store.getters.isAuthenticated
if (!isAuthenticated) {
// 用户未认证,重定向到登录页面
next({ path: '/login' })
} else {
// 用户已认证,允许访问'/home'
next()
}
} else {
// 对于其他不需要认证的路由,直接放行
next()
}
})
// 登录成功后,提交mutation到Vuex store设置认证状态
store.commit('SET_AUTHENTICATED', true)
// 然后重定向到主页
router.push('/home')
在这个代码片段中:
- 我们定义了一个全局的
beforeEach
导航守卫,它会拦截每一次路由变更。 - 如果目标路由是’/home’,我们会检查用户的身份验证状态(通常存储在Vuex store中)。
- 如果用户未经认证,将会被重定向到’/login’页面。
- 登录成功后,Vuex store中的’已认证’状态会被更新,接着用户会被重定向到’/home’页面。