Vue SPA - 检查用户是不是通过身份验证，如果没有则重定向到登录

Posted 2023-03-10

【中文标题】Vue SPA - 检查用户是不是通过身份验证，如果没有则重定向到登录

【英文标题】：Vue SPA - check if user is authenticated, redirect to login if notVue SPA - 检查用户是否通过身份验证，如果没有则重定向到登录

【发布时间】：2021-10-07 02:37:45

【问题描述】：

我有一个VueJS 单页应用程序，我使用 JWT 身份验证。

我正在尝试弄清楚如何确保用户在页面重新加载后通过身份验证，如果没有，则将其重定向到登录页面。

accessToken 和 refreshToken 存储在 cookies 和 Vuex 中

Vuex.state：

auth: 
        user: ,
        isAuthenticated: false,
        accessToken: null,
        refreshToken: null
    ,

Vuex.actions.refreshToken

    refreshToken: async (state, commit, dispatch) => 
        try 
            await api.jwtRefresh(state.auth.refreshToken).then(response => 
                if (response.status === 200) 
                    dispatch("setAuthData",
                        accessToken:response.data.access,
                        isAuthenticated:true
                    )
                
            ).catch(err => 
                dispatch('logout')
            );
         catch (e) 
            dispatch('logout')
        
    ,

App.vue

export default 
  data: () => (),
  mounted() 
    this.$store.dispatch('setAuthDataFromCookies')
    this.$store.dispatch('refreshToken') // checks if user is authenticated, redirect to login page if not
    this.$router.push('/dashboard')
  

我的想法是尝试刷新 JWT 令牌。如果成功刷新用户可以继续/dashboard。如果没有，用户将被重定向到/login

问题是mounted 不会等到refreshToken 完成，它甚至在刷新令牌之前就立即将用户重定向到/dashboard。

我怎样才能让它等待？ （想法是refreshToken 将用户重定向到/login 以防出错。

【参考方案1】：

您可以在路由器中设置元 auth 字段，以及检查 Vuex（或您的 cookie，或两者）是否有令牌的全局 beforeEnter 或 beforeEach 守卫。

在您的 router.js 文件中，您会有类似的内容

routes: [
  
    name: 'Login'
  ,
  
    name: 'Dashboard', // + path, component, etc
    meta: 
      auth: true
    
  
]

然后你设置一个全局守卫，像这样：

router.beforeEach((to, from, next) => 
  if (to.matched.some(record => record.meta.auth)) 
    if (!store.getters.authToken) 
      next( name: 'Login' );
     else 
      next();
    
   else 
    next(); // Very important to call next() in this case!
  
)

这将在每个路由转换之前检查下一个路由是否具有auth 元字段。如果是，它会检查你的 Vuex 状态以获取令牌，否则正常导航。

Vue Router Docs on Navigation Guards

在您的情况下，您正在尝试对用户进行身份验证，因此您可以在 beforeEach 防护内调用您的端点并根据响应进行重定向。只要确保回调异步，如router.beforeEach(async (to, from, next) => )