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

Posted 2023-02-22

【中文标题】在 nuxtjs 中刷新页面后如何保持用户身份验证？

【英文标题】：how to keep user authenticated after refreshing the page in nuxtjs?

【发布时间】：2021-09-11 10:11:22

【问题描述】：

如果我刷新用户不再经过身份验证的页面并且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
  

成功登录后

刷新页面后

【参考方案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这样的包

【讨论】：

Localstorage 不适合存储敏感数据。这个答案详细解释了它：***.com/questions/3718349/html5-localstorage-security

@Laurens 谢谢，我刚刚尝试过，不幸的是它没有用，我现在在本地存储中有一个带有令牌的 'authToken'，但仍然刷新用户不再经过身份验证

@AIB 这不是完整的解决方案，您还必须在初始化存储时使用localStorage.getItem 检索 localStorage，阅读 localStorage 的工作原理

@mbuechmann 虽然你认为 localstorage 不是最安全的方法是正确的，但如果你有 xss 漏洞，你就会遇到更大的问题。阅读pragmaticwebsecurity.com/articles/oauthoidc/…。但最好的方法是使用 cookie 而不是本地存储。您可以使用 nuxt/auth 模块执行此操作：auth.nuxtjs.org/schemes/cookie

@Laurens 在这种情况下使用 cookie 与 laravel 护照一起使用还是与后端无关？

【参考方案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
  ...

【讨论】：

谢谢，在这种情况下使用 cookie 是否与后端无关？因为我在后端使用 laravel 护照进行身份验证？

@AIB 据我所知，你可以在客户端使用任何你想要的东西（cookie 或localStorage），因为这是你自己生成的，而不是你的实际后端。