Navigate to another page after login in

Dash Python
1

I have a problem. I want to automatically jump to another page after logging in. What should I do? Any help grateful appreciated. index.py is the login page, and main.py is the page to jump after logging in successfully.

index.py

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from flask import render_template

from config import PROJECT_DIRECTORY, USER, PWD, logo_link
from helper import verification, verify_user
from apps import main
from app import app


#
# auth = dash_auth.BasicAuth(
#     app,
#     {USER: PWD}
# )

app.layout= html.Div(
    [
        html.Div(
            [
                html.Img(src=logo_link, className="tb-login-logo"),
                html.H1("Sign in to Dashboard"),
                html.Div("Email", id="emailLabel", className="tb-login-field-labels"),
                dcc.Input(id="email", className="tb-text-box-holder"),
                html.Div(
                    "Password", id="passwordLabel", className="tb-login-field-labels"
                ),
                dcc.Input(
                    id="password",
                    className="tb-text-box-holder",
                    type="password",
                    # placeholder="Enter Password",
                ),
                html.Div(),
                html.Button(
                    id="sign",
                    children="Sign In",
                    className="tb-login-button",
                    n_clicks=0,
                ),
            ],
            className="tb-saml-login",
        ),
        html.Div(id="index_content"),
   
    ],
)


@app.callback(
    Output("index_content", "children"),
    [Input("sign", "n_clicks")],
    state=[State("email", "value"), State("password", "value")],
)
def login(n_clicks, email, password):
    if n_clicks > 0:
        flag = verify_user(email, password)
        print(flag)
        if flag == "Success":
            return "how should I do"
        else:
            return "Your account or password is incorrect."
    return None



if __name__ == "__main__":
    app.run_server(debug=True)

main.py

import base64
import io
import os
import time
import dash
import dash_table
import pandas as pd
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
from flask import Flask
from config import PROJECT_DIRECTORY, USER, PWD
from helper import verification
from apps import page_login
from layouts import (
    page_1_layout,
    page_2_layout,
    page_3_layout,
    page_4_layout,
    page_5_layout,
    page_6_layout,
)
from app import app



layout = html.Div(
    [
        dcc.Loading(id="loading"),
        dcc.Tabs(
            id="tabs",
            value="tab-1",
            children=[
                dcc.Tab(label="首页", value="tab-1"),
                dcc.Tab(label="会议", value="tab-2"),
                dcc.Tab(label="人", value="tab-3"),
                dcc.Tab(label="报销单", value="tab-4"),
                dcc.Tab(label="上传与下载", value="tab-5"),
                dcc.Tab(label="配置页", value="tab-6"),
            ],
        ),
        html.Div(id="tabs-content"),
    ]
)


@app.callback(
    [Output("tabs-content", "children"), Output("loading", "children")],
    Input("tabs", "value"),
)
def display_tabs(tab):
    print(tab)
    if tab == "tab-1":
        return page_1_layout, None
    elif tab == "tab-2":
        return page_2_layout, None
    elif tab == "tab-3":
        return page_3_layout, None
    elif tab == "tab-4":
        return page_4_layout, None
    elif tab == "tab-5":
        return page_5_layout, None
    elif tab == "tab-6":
        return page_6_layout, None
    else:
        return "参数错误"
2

Hi @aaronhh and welcome to the plotly community!

Have you seen this example from the docs - URL Routing and Multiple Apps | Dash for Python Documentation | Plotly
You can use the dcc.Link component for adding navigation links on your index.py to your main.py and vice-versa. Also check out the Structuring a Multi-Page App section from the above link to follow the dash structure of multi-page apps.

3

thanks, RafaelMiquelino/dash-flask-login: Implementation of Flask-login on top of Dash. (github.com) it works for me.

1 Like