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

Question

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

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

accessToken 和 refreshToken 存储在 cookies 中，也存储在 Vuex

Vuex.状态:

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')
        }
    },

应用程序.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 token 。如果刷新成功，用户可以继续访问 /dashboard。如果没有，用户将被重定向到 /login

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

我怎样才能让它等待？ (这个想法是，如果出现错误，refreshToken 会将用户重定向到 /login。

Answer 1

您可以在路由器中设置一个元 auth 字段，以及一个全局 beforeEnter 或 beforeEach 防护来检查 Vuex(或您的 cookie、或两者)作为 token 。

在你的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 状态中的 token ，否则将正常导航。

Vue Router Docs on Navigation Guards

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