Javascript hết bộ nhớ khi sử dụng Nuxt auth và axios
Tôi đang cố gắng triển khai đăng nhập cục bộ trong ứng dụng Nuxt của mình sử dụng phần mềm trung gian máy chủ express.
Tôi đang sử dụng các mô-đun sau
- nuxt auth
- axios
- passport, passport-local, passport-local-mongoose, passport-session
- phiên cấp tốc
Nhưng ngay sau khi tôi thiết lập nuxt auth trong ứng dụng của mình, toàn bộ ứng dụng dường như ngừng phản hồi. Tôi không thể truy cập bất kỳ trang nào (thậm chí không phải trang đăng nhập và đăng ký) trong ứng dụng của tôi. Sau khi chạy máy chủ một lúc, đây là những gì tôi thấy.https://i.stack.imgur.com/pl0Li.png
auth: {
redirect: {
login: "/login", // User will be redirected to this path if login is required.
home: "/", // User will be redirect to this path after login. (rewriteRedirects will rewrite this path)
logout: "/login", // User will be redirected to this path if after logout, current route is protected.
user: "/user",
callback: "/",
},
strategies: {
local: {
endpoints: {
login: {
url: "/api/login",
method: "post",
propertyName: "token",
},
logout: { url: "/api/logout", method: "post" },
user: { url: "/", method: "get", propertyName: "user" },
},
tokenRequired: true, //True by default
tokenType: "bearer",
// globalToken: true,
// autoFetchUser: true
},
},
},
Theo https://github.com/nuxt-community/auth-module/issues/286#issuecomment-461138282, việc đưa ra yêu cầu tới phần mềm trung gian của máy chủ có thể là nguyên nhân gây ra lỗi này không?
Tôi có nên có một máy chủ riêng cho api không?
Trả lời
Tôi đang đối mặt với vấn đề tương tự. Trong trường hợp của tôi, vấn đề nằm ở cấu hình xác thực sau. Nó xảy ra trên một cài đặt mới của nuxt: 2.14.3, và do đó, nó sẽ dễ dàng tạo ra lỗi. Chỉ cần thêm cấu hình này sẽ làm ứng dụng bị treo. Tôi đang sử dụng @ nuxt / auth-next: ^ 5.0.0-1595976864.509d9d6
// nuxt.config.js
auth: {
strategies: {
cookie: {
cookie: {
name: 'session',
},
endpoints: {
login: { url: '/api/login', method: 'post' },
logout: { url: '/api/logout', method: 'post' }
}
}
}
},
Tôi đã giải quyết vấn đề của mình. Tôi đã gặp phải sự cố sau với nuxt-authhttps://github.com/nuxt-community/auth-module/issues/286Tôi đã có các dịch vụ xác thực và nuxt của mình trên cùng một máy chủ, điều này khiến mô-đun xác thực nuxt đi trong một vòng lặp vô hạn (thêm chi tiết trong liên kết ở trên). Vì vậy, tôi đã tạo các máy chủ riêng biệt cho các dịch vụ API và SSR (nuxt).
Sau đây là cấu hình nuxt-auth của tôi, không có nhiều khác biệt.
auth: {
redirect: {
login: "/register",
home: "/",
logout: "/register",
user: "/user",
callback: "/",
},
strategies: {
local: {
endpoints: {
login: {
url: "/login",
method: "post",
propertyName: "token",
},
logout: { url: "/logout", method: "post" },
user: { url: "/user", method: "get", propertyName: "user" },
},
tokenRequired: false,
tokenType: false,
},
},
},
Quan trọng hơn , đây là cấu hình axios của tôi. Lưu ý rằng tôi đang yêu cầu một máy chủ khác.
axios: {
baseURL: "http://localhost:5000/",
credentials: true,
init(axios) {
axios.defaults.withCredentials = true;
},
},
Bây giờ một cái gì đó không liên quan đến vấn đề ban đầu, Hãy cũng đảm bảo rằng nếu bạn đang thực hiện các yêu cầu API từ phần mềm trung gian của trang rằng cookie thích hợp sẽ được gửi.
Xem liên kết này, https://github.com/nuxt/nuxt.js/issues/454Vì phần mềm trung gian của trang có thể được thực thi ở phía máy chủ trong SSR, cookie có thể không khả dụng ở đó. Có các mô-đun làm cho cookie có sẵn ở phía máy chủ. Nhưng thay vì điều đó, bạn chỉ có thể đặt các yêu cầu API của mình trong một phương thức được thực thi trong trình duyệt, ví dụ: đã tạo, tìm nạp, v.v.
Xin lỗi, tôi viết câu trả lời này rất vội, tôi sẽ cải thiện nó sau.