Avoid NavigationDuplicated error after Login

Only redirect on mounted if already logged-in

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-06 12:26:36 +02:00
parent 709d26735b
commit 3f538ccf95
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 10 additions and 12 deletions

View file

@ -123,7 +123,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { Route } from "vue-router"; import { Route } from "vue-router";
import { ICurrentUser } from "@/types/current-user.model"; import { ICurrentUser } from "@/types/current-user.model";
import { LoginError, LoginErrorCode } from "@/types/enums"; import { LoginError, LoginErrorCode } from "@/types/enums";
@ -207,6 +207,11 @@ export default class Login extends Vue {
const { query } = this.$route; const { query } = this.$route;
this.errorCode = query.code as LoginErrorCode; this.errorCode = query.code as LoginErrorCode;
this.redirect = query.redirect as string | undefined; this.redirect = query.redirect as string | undefined;
// Already-logged-in and accessing /login
if (this.currentUser.isLoggedIn) {
this.$router.push("/");
}
} }
async loginAction(e: Event): Promise<Route | void> { async loginAction(e: Event): Promise<Route | void> {
@ -240,7 +245,7 @@ export default class Login extends Vue {
if (window.localStorage) { if (window.localStorage) {
window.localStorage.setItem("welcome-back", "yes"); window.localStorage.setItem("welcome-back", "yes");
} }
this.$router.push({ name: RouteName.HOME }); this.$router.replace({ name: RouteName.HOME });
return; return;
} catch (err: any) { } catch (err: any) {
this.submitted = false; this.submitted = false;
@ -279,13 +284,6 @@ export default class Login extends Vue {
} }
} }
@Watch("currentUser")
redirectToHomepageIfAlreadyLoggedIn(): Promise<Route> | void {
if (this.currentUser.isLoggedIn) {
return this.$router.push("/");
}
}
get hasCaseWarning(): boolean { get hasCaseWarning(): boolean {
return this.credentials.email !== this.credentials.email.toLowerCase(); return this.credentials.email !== this.credentials.email.toLowerCase();
} }

View file

@ -22,7 +22,7 @@ import { InMemoryCache } from "@apollo/client/cache";
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Buefy); localVue.use(Buefy);
config.mocks.$t = (key: string): string => key; config.mocks.$t = (key: string): string => key;
const $router = { push: jest.fn() }; const $router = { push: jest.fn(), replace: jest.fn() };
describe("Render login form", () => { describe("Render login form", () => {
let wrapper: Wrapper<Vue>; let wrapper: Wrapper<Vue>;
@ -125,9 +125,9 @@ describe("Render login form", () => {
await flushPromises(); await flushPromises();
expect(currentUser?.email).toBe("some@email.tld"); expect(currentUser?.email).toBe("some@email.tld");
expect(currentUser?.id).toBe("1"); expect(currentUser?.id).toBe("1");
expect(jest.isMockFunction(wrapper.vm.$router.push)).toBe(true); expect(jest.isMockFunction(wrapper.vm.$router.replace)).toBe(true);
await flushPromises(); await flushPromises();
expect($router.push).toHaveBeenCalledWith({ name: RouteName.HOME }); expect($router.replace).toHaveBeenCalledWith({ name: RouteName.HOME });
}); });
it("handles a login error", async () => { it("handles a login error", async () => {