Vue Router(히스토리 모드) 및 Webpack 외부 리디렉션 처리
<p>SO 커뮤니티</p>
<p>기존 Vue 2 애플리케이션에 외부 인증을 추가하려고 합니다. 내가 겪고 있는 문제는 외부 IdP가 <code>/redirect</code> 경로를 사용하여 Vue 애플리케이션으로 다시 리디렉션할 때 Vue Router가 업데이트된 경로를 존중하지 않고 올바른 구성 요소로 경로를 지정하는 것 같다는 것입니다. . 즉, Vue Router는 <code>/redirect</code> 구성요소 대신 <code>/</code> 구성요소로 라우팅합니다. </p>
<p>Vue Router는 <code>mode: 'history'</code>를 설정하고 Webpack은 <code>historyApiFallback: true</code>를 설정합니다. </p>
<h1>현재 동작: </h1>
<올>
<li>사용자가 <code>https://localhost:8080/</code>로 이동하면 <code>Login</code> </li>
사용자가 자신의 ID를 입력하면 외부 IdP로 리디렉션됩니다. </li>
<li>인증에 성공하면 IdP는 지정된 리디렉션 URL로 돌아갑니다: <code>https://localhost:8080/redirect</code></li>
<li>기록 모드로 인해 Webpack은 브라우저를 <code>/</code>로 보내고, 이는 <code>Login</code> 구성요소를 반환합니다. </li>
<li><code>Login</code> 구성 요소에서 <code>mounted()</code> 후크 확인<code>if (window.location.pathname === '/redirect') 라우터 .push({ 경로: '/redirect' });</code></li>
<li>Vue 라우터는 <code>/redirect</code> 및 해당 구성요소 대신 <code>/</code> 경로로 이동합니다.</li>
</ol>
<h2>技术细节：</h2>
<p>Vue - 2.5.15</p><p>
루로由器视图 - 3.0.0</p><p>
웹팩 - 4.17.1</p><p>
웹팩 开发服务器 - 3.1.4</p>
<h2><code>webpack.dev.js</code></h2>
<pre class="brush:php;toolbar:false;">devServer: {
HistoryApiFallback: true,</pre>
<h2><code>router.js</code></h2>
<pre class="brush:php;toolbar:false;">const router = new VueRouter({
모드: '역사',
경로: [
...
{
경로: '/리디렉션',
구성 요소: 리디렉션,
},
{
길: '/',
리디렉션: () => {
},
...
router.beforeEach((to, from, next) => {
const 사용자 = store.state.user.authorizedUser
const toPath = to.path
if (toPath === '/redirect') 반환
});</pre>
<h2><code>App.vue</code></h2>
<pre class="brush:php;toolbar:false;">new Vue({
엘: '#로그인',
렌더링: h => h(로그인),
가게,
})</pre>
<h2><code>登录.vue</code></h2>
<pre class="brush:php;toolbar:false;">mounted() {
if (window.location.pathname === '/redirect') router.push({ 경로: '/redirect' });
}</pre>
<p>请告诉我是否需要提供任何其他细节或代码。提前感谢您的帮助。</p>
