我有一個 VueJS 3 應用程式在使用 nginx 作為 Web 服務器的 docker 容器中運行。
我集成了 okta 進行身份驗證。okta 集成在沒有 ngnix 的 localhost:3000 上運行良好。但是，在生產中部署時，在成功驗證后，重定向會卡在回呼頁面上：
回呼路由器定義：
import { LoginCallback } from '@okta/okta-vue'
import { createRouter, createWebHistory } from 'vue-router'
const routes =[{
path: '/iam/callback',
component: () => LoginCallback
}]
const router = createRouter({
history: createWebHistory('/'),
routes
})
我的 Docker 檔案如下所示：
FROM node:17.5-alpine3.14 as package
# set working directory
WORKDIR /usr/src/webapp
# install and cache app dependencies
COPY package*.json ./
COPY nginx.conf ./
#RUN npm install
RUN npm ci
COPY . .
RUN npm run build
# production environment
FROM nginx:1.21.6-alpine as production
COPY --from=package /usr/src/webapp/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
COPY entrypoint.sh /
# Make the file executable
RUN chmod x /entrypoint.sh
CMD ["./entrypoint.sh"]
和 nginx 配置看起來像這樣：
server {
listen 80;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
nginx配置有問題嗎？
登錄流程代碼：
const transaction = await this.$auth
.signInWithCredentials({
username: this.username,
password: this.password
})
.catch((error) => console.log(error))
if (transaction.status === 'SUCCESS') {
const originalUri = this.$auth.getOriginalUri()
if (!originalUri) {
this.$auth.setOriginalUri('/app/next')
}
this.$auth.token.getWithRedirect({
sessionToken: transaction.sessionToken,
responseType: 'access_token'
})
}
uj5u.com熱心網友回復：
您的nginx.config檔案需要支持 SPA。也就是說，它需要將所有請求重定向到index.html.
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
}
}
來自https://developer.okta.com/blog/2020/06/17/angular-docker-spring-boot#create-a-docker-container-for-your-angular-app
uj5u.com熱心網友回復：
不確定確切的問題是什么，但更改登錄流程解決了問題。
我沒有使用get，而是將我的登錄流程稱為：
從：
this.$auth.token.getWithRedirect({
sessionToken: transaction.sessionToken,
responseType: 'access_token'
})
到：
if (transaction.status === 'SUCCESS') {
const originalUri = this.$auth.getOriginalUri()
if (!originalUri) {
this.$auth.setOriginalUri('/app/next')
}
const { tokens } = await this.$auth.token.getWithoutPrompt({
responseType: 'id_token',
sessionToken: transaction.sessionToken
})
await this.$auth.tokenManager.setTokens(tokens)
await this.$auth.handleLoginRedirect(tokens)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/444637.html
下一篇：記憶體不足：殺死行程