在 nuxtjs 中刷新页面后如何保持用户身份验证？

Question

如果我刷新用户不再经过身份验证的页面并且loggedIn 返回 false，我在成功登录后使用 laravel 护照作为 API 和 nuxt.js 作为前端，这是我的第一个 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
  }
}

成功登录后

刷新页面后

Answer 1

您可以只使用 localStorage 并自己实现它，例如：

  saveToken(state, token) {
    localStorage.setItem("authToken", token);
    state.token= token
  },
  saveUser(state, payload) {
    localStorage.setItem("authUser", payload);
    state.user=payload;
  },

然后在初始化商店时检索 localStorage，您需要执行以下操作：

export const state = () => {
  const localUser = localStorage.getItem("authToken")
  const localToken = localStorage.getItem("authUser")
  let user = {}
  let token = ""
  if (localUser) user = localUser
  if (localToken) token = localToken
  return {
    user: user,
    token: token
  }
}

正如@mbuechmann 所指出的，在 localStorage 中存储敏感信息时要注意安全风险。最好将 cookie 用于令牌，但 localStorage 是“简单”的解决方案。

或者使用像nuxt-vuex-localstorage这样的包

Answer 2

在我的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，效果很好！

在访问或刷新 web 应用时（如果未通过身份验证，我们会重定向到 /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 模块提供。

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

nuxt.config.js

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