如何在nuxtjs中刷新页面后保持用户身份验证？ [英] how to keep user authenticated after refreshing the page in nuxtjs?

问题描述

成功登录后，我对API使用laravel Passport，对前端使用nuxt.js。如果我刷新页面，用户不再通过身份验证，loggedIn返回False，这是我的第一个nuxt.js项目，因此我不知道如何处理，任何建议都将不胜感激

login.vue

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods:{
    async login(){
      const succesfulLogin = await this.$auth.loginWith('local', {
        data: {
          email: this.email,
          password: this.password
        },
      })
      this.$store.commit("saveUser",succesfulLogin.data)
      this.$store.commit("saveToken", succesfulLogin.data.token)

      if (succesfulLogin) {
        await this.$auth.setUser({
          email: this.email,
          password: this.password,
        })
        this.$router.push('/profile')
      }
    }
  }
}
</script>

store/index.js

export const state = () => ({
  user:{},
  token: ""
})

export const mutations = {
  saveUser(state, payload) {
    state.user=payload;
  },
  saveToken(state, token) {
    state.token= token
  }
 
}
export const actions = {
     saveUserAction({commit}, UserObject){
         commit('saveUser');
     },
     logoutUser({commit}){
        commit('logout_user')
     }
}
export const getters = {
  getUser: (state) => {
    return state.user
  },
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.user.user
  }
}

成功登录后

刷新页面后

推荐答案

我们确实在auth模块身份验证之后立即使用全局中间件

/middleware/global.js

export default async ({ app, store }) => {
  if (store?.$auth?.$state?.loggedIn) {
    if (!app.$cookies.get('gql.me_query_expiration')) {
      // do some middleware logic if you wish

      await app.$cookies.set('gql.me_query_expiration', '5min', {
        // maxAge: 20,
        maxAge: 5 * 60,
        secure: true,
      })
    }
  }
}

nuxt.config.js

router: {
  middleware: ['auth', 'global'],
},

我们正在使用cookie-universal-nuxt快速处理安全Cookie，效果非常好！

访问或刷新WebApp时(如果未通过身份验证，我们会重定向到/login页)，并且在需要Cookie的地方使用此基本GraphQL配置。

/plugins/nuxt-apollo-config.js

export default ({ app }) => {
  const headersConfig = setContext(() => ({
    credentials: 'same-origin',
    headers: {
      Authorization: app.$cookies.get('auth._token.local'), // here
    },
  }))

  [...]
}

检查gql.me_query_expiration允许我们查看用户最近是否已进行身份验证/当前是否已进行身份验证，或者他是否需要刷新其令牌。
auth._token.local是我们的实际JWT令牌，由auth模块提供。

如上所述，拥有一个securecookie比一些localStorage更安全，这也是我们不使用它的原因

nuxt.config.js

auth: {
  localStorage: false, // REALLY not secure, so nah
  ...
}

这篇关于如何在nuxtjs中刷新页面后保持用户身份验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！