CSRF 令牌和 Nuxt-auth答案

【问题标题】：CSRF token and Nuxt-authCSRF 令牌和 Nuxt-auth
【发布时间】：2022-01-26 13:15:12
【问题描述】：

我现在正在尝试使用 nuxt-auth 编写登录功能。

我有一个 FastAPI 服务器，它设置为使用 HTTPOnly cookie，因此它需要一个 csrf 令牌来将用户扔给我的客户端。我无法处理令牌，因为它是 HTTPOnly 所以没有 LocalStorage

登录工作正常，但我无法获取存储的用户。我在向我的/login 端点提出请求后，Nuxt 还请求/me 端点上的用户。但我收到了 401 响应，并且

缺少 cookie access_token_cookie

/me 出错。不知道怎么处理。

我的登录请求方法

async userLogin() {
  await this.$auth.loginWith('cookie', {
    data: `grant_type=&username=${this.emailInput}&password=${this.passwordInput}&scope=&client_id=&client_secret=&`,
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  })
  await this.$router.push('/account')
}

我读到 nuxt-auth 不擅长 cookie 模式，但该帖子是 2018 年发布的，我们现在有一个“cookie”策略。那么有没有更好的手动处理身份验证的解决方法？

我的auth 输入nuxt.config.js

auth: {
  strategies: {
    cookie: {
      endpoints: {
        login: {
          url: "/api/v1/login/login",
          method: "post",
          withCredentials: true
        },
        logout: { url: "/api/v1/login/logout", method: "post" },
        user: {
          url: "/api/v1/users/me",
          method: "get"
        }
      },
      tokenType: "bearer"
    }
  }
}

【问题讨论】：

标签： vue.js nuxt.js fastapi nuxt-auth

【解决方案1】：

我在 Nuxt + Django 上有一个基于 http-only cookie 的有效设置。

我的 Nuxt 应用程序将 API 请求反向代理到后端。因此，它可以在服务器端读取 cookie。

所以，我创建了auth-ssr.ts 中间件来检查用户是否登录

import { Context, Middleware } from '@nuxt/types'
import { parse as parseCookie } from 'cookie' // this is lib https://github.com/jshttp/cookie

/**
 * This middleware is needed when running with SSR
 * it checks if the token in cookie is set and injects it into the nuxtjs/auth module
 * otherwise it will redirect to login
 * @param context
 */
const authMiddleware: Middleware = async (context: Context) => {
  if (process.server && context.req.headers.cookie != null) {
    const cookies = parseCookie(context.req.headers.cookie)
    const token = cookies['session'] || '' // here your cookie name
    if (token) {
      context.$auth.$state.loggedIn = true
    }
  }
}

export default authMiddleware

这里是我的nuxt.config.js

  auth: {
    strategies: {
      cookie: {
        user: {
          property: 'user',
        },
        endpoints: {
          login: {
            url: '/api/v2/auth/login/',
            method: 'post',
          },
          user: {
            url: '/api/v2/auth/user/',  
            method: 'get',
          },
          logout: {
            url: '/api/v2/auth/logout/',
            method: 'post',
          },
        },
      },
    },
    redirect: {
      login: '/login',
    },
    plugins: ['@plugins/axios.ts'],
  },
  
  router: {
    middleware: ['auth-ssr', 'auth'],
  },
  
  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
  },

  proxy: {
    '/api': {
      target: 'https://backend.com/',
    },
  },
  
  ...

【讨论】：