vaadin登录成功后如何进入主页

Question

I am trying to use vaadin login to implement a login page. I don't know how to navigate to another page ( main-view.js ) after successful login. Following is the code snippet

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-login/vaadin-login-form.js';
import '@vaadin/vaadin-dialog/vaadin-dialog.js';

class LoginView extends PolymerElement {
static get template() {
    return html`
        <style>
            :host {
                display: flex;
                justify-content: center;
                background: var(--main-background);
                padding: var(--main-padding);
            }
        </style>
        <vaadin-login-form id="login"></vaadin-login-form>
        <vaadin-dialog id="feedbackDialog">
            <template>Login is being processed...</template>
        </vaadin-dialog>
        <vaadin-dialog id="supportDialog">
            <template>Please contact support.</template>
        </vaadin-dialog>
    `;
}

ready() {
    super.ready();
    console.log('ready');
    const that = this;
    this.$.login.addEventListener('login', function(e) {
        let detail = e.detail;
        console.log(detail);
        that.$.feedbackDialog.opened = true;
        setTimeout(function() {
            let isLogged = that._loginAttempt(detail.username, detail.password);
            if(isLogged) {
                that.$.login.disabled = false;
                that.$.feedbackDialog.opened = false;
            }
        }, 2000);
    });
    this.$.login.addEventListener('forgot-password', function() {
        that.$.supportDialog.opened = true;
    });
}

_loginAttempt(username, password) {
    if(username === 'admin' && password === 'admin') {
        this.userData.logged = true;
        return true;
    } else {
        this.$.login.error = true;
        return false;
    }
}
}
window.customElements.define('login-view', LoginView);

In the _loginAttempt function I am checking whether the username and password is correct. If it is then how to move the main-view ?

Thanks

Answer 1

You could manage your page navigation with the below components:

import "@polymer/app-route/app-location.js";
import "@polymer/app-route/app-route.js";
import "@polymer/iron-pages/iron-pages.js";

And here a basic usage example: (at my-app.js)

static get template() { return html`
 <app-location route="{{route}}"></app-location>
 <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>
 ....
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="main" >  

   <main-view name="main""></main-view>
   <login-view name="login""></login-view>
</iron-page>
`}

 static get properties() { return {
        page:{
            type:String,
            reflectToAttribute:true,
            observer: '_pageChanged'
        }
 }}

and at login-view.js :

 import '@polymer/app-route/app-route.js';
 ... 
  static get template() { return html`
     <app-location route="{{route}}"></app-location>
 ...
 if(isLogged) {
        that.$.login.disabled = false;
        that.$.feedbackDialog.opened = false;
        this.set('route.path', '/main')

 }