Nuxt.js $auth.loggedIn 工作原理详解

2024-12-24 14:16:52

Nuxt.js 中 $auth.loggedIn 的工作原理

$auth.loggedIn 是 Nuxt.js 中 @nuxtjs/auth-next 模块提供的一个便捷属性。它用于检查用户是否已验证，从而控制用户访问权限或显示特定界面。理解其工作方式，有助于开发者更好地管理应用中的用户认证状态。本文深入探讨 loggedIn 的运作机制，以及如何在实践中进行运用。

理解验证状态

$auth.loggedIn 标志位是根据存储在客户端的状态信息设置的。此状态信息通常是在用户登录时通过验证流程获得。与服务器端的 session 不同，$auth.loggedIn 依赖客户端的状态，确保单页应用流畅的体验。关键点在于：loggedIn 的值并非实时反映服务器验证状态，而是基于应用自身维护的用户登录状态。

具体来说，@nuxtjs/auth-next 会尝试从客户端的存储中（例如 Cookies 或 Local Storage）获取身份验证信息（如 Token）。当用户成功登录，后端返回的信息包含令牌时，模块会将令牌以及用户信息保存下来。$auth.loggedIn 的值会根据存储中的验证信息存在情况来决定。如果找到有效的验证凭据（例如有效的token），那么 loggedIn 就为 true，否则为 false。简单来讲， loggedIn 就是用来指示当前是否有可用的有效身份凭据，并非通过再次与后端通讯的方式决定。

认证流程中的 `$auth.loggedIn`

认证流程是这样的：当用户尝试登录，应用发送请求到后端，后端验证身份，返回用户信息和 Token。在前端，@nuxtjs/auth-next模块截获此响应。模块会将返回的Token，并按照配置将数据存入内存，或Cookies/LocalStorage等浏览器存储中。存储完成，模块自动设置 $auth.loggedIn为true。如果后端没有返回有效的令牌（比如登录失败），模块将清空存储中的令牌，同时 $auth.loggedIn为false。

如何保证 $auth.loggedIn 与后端同步？

需要强调的是： $auth.loggedIn 基于前端存储状态。它并不是一个持续与后端进行验证的指示器。为保证身份有效性，应用需要定期发送带有存储的Token 的请求，请求中通常会将 token放在 HTTP header的 authorization 中发送到后端，来刷新当前登录态，如果后端token校验失败，则表明存储的凭证过期或失效。这时需要后端返回错误信息，前端收到错误信息后，应该移除Token, 且自动更新$auth.loggedIn的值。此过程由 @nuxtjs/auth-next 模块中的 scheme （例如： local, oauth2）自动管理。如果需要刷新Token或自动注销用户需要根据具体的策略进行配置，并在方案配置中完成。

配置示例与代码实践

理解了 loggedIn 的基本机制，接下来将以 @nuxtjs/auth-next 提供的 local 方案为例，给出相应的配置代码。

配置 `@nuxtjs/auth-next`

首先，在 nuxt.config.js 文件中配置 @nuxtjs/auth-next：

// nuxt.config.js
modules: [
  '@nuxtjs/auth-next',
],
auth: {
  strategies: {
    local: {
      token: {
        property: 'token', //  后端返回token的属性名
         global: true,  // 所有请求头默认会带上token
        type: 'Bearer',  // 设置 Bearer
       //required: true , 强制必须传
        //name: "Authorization" , Authorization
       //  maxAge : 60*60*24*30  , 设置cookie/localStorage有效时长, 需要开启存储token功能，比如localStorage,
      },
       user: {
         property: 'user',
          //autoFetch: true // 自动发送获取用户信息的请求
       },
       endpoints: {
        login:  { url: '/auth/login', method: 'post' }, //  登录请求的路由
        logout:  { url: '/auth/logout', method: 'post' }  ,//退出
        user:  { url: '/auth/user', method: 'get' }   ,// 获取当前用户信息请求
        },
        // tokenRequired: true, 如果服务器验证必须带token才访问的话,可以把这里的设为true, 否则就设为false
    },
  }
}

上述代码配置了 local 认证策略。重点是 token 和 user 字段，定义了 token 在后端响应中的属性以及用户信息响应。 endpoints 部分指定了登陆，注销以及用户信息接口。在用户登陆成功后，模块将token 保存起来，同时把$auth.loggedIn设置为 true。当发送请求时，它会自动读取已存储的 Token，并将其添加到请求头中（通常是Authorization: Bearer <token>）。

登录方法：

登录组件或页面示例代码：

<template>
  <form @submit.prevent="login">
      <input type="text" v-model="username" />
      <input type="password" v-model="password"/>
      <button type="submit">Login</button>
  </form>
</template>
<script>
export default {
   data() {
    return{
       username: '',
       password: ''
     }
  },
 methods: {
  async login () {
   try{
     await this.$auth.loginWith('local', {
        data:{
            username: this.username,
           password: this.password
         }
    })
     this.$router.push('/dashboard');
   } catch (error) {
         // 处理登录失败逻辑，比如给出错误提示
   }
   }
 }
}
</script>

在以上例子中, 用户在登录后通过 loginWith 方法完成认证请求并跳转到 /dashboard 页面。

检测 `$auth.loggedIn`

通常使用 v-if 或 computed 属性根据$auth.loggedIn的值，有条件地渲染 UI 组件：

<template>
 <div>
  <div v-if="$auth.loggedIn">
   <p> Welcome , User!</p>
   <button @click="logout">Logout</button>
 </div>
  <div v-else>
    <p> Please Login</p>
   <router-link to="/login"> Login Now </router-link>
   </div>
  </div>
</template>
<script>
  export default {
 methods: {
    logout() {
        this.$auth.logout()
   }
  }
 }
</script>

代码通过 $auth.loggedIn 值的变化来控制内容是否显示，并且在用户退出时通过调用 this.$auth.logout() 来注销用户并更新状态。

安全提示

始终使用 HTTPS 连接，防止 Token 被窃取。
存储 Token 时选择合适的策略。如果不存储token则每一次都通过后端重新认证。Cookie 设置 httpOnly 和 secure 标志，阻止 JavaScript 直接访问。LocalStorage 储存的令牌要格外注意安全，可能会受XSS攻击影响。
设置 Token 的过期时间。
服务端需要做好权限校验。