在Dash应用中，经常会遇到使用dash-auth库实现的认证机制，这种机制通常以弹出窗口的形式出现。但如果想要一个类似于HTML、JavaScript、PHP等技术中的登录页面，应该如何实现呢？本文将为解答这个问题。
创建了一个Dash应用，并使用dash-auth添加了用户认证功能。在进行测试时，由于认证是弹出窗口形式，无法获取id、类名或任何可以用来测试登录模块的信息。尽管尝试了文章中提供的一些方法，但仍然没有效果。即使在网上搜索了几个小时，也没有找到令满意的答案。这时，意识到需要找到一种方法来解决这个问题。知道dcc.Link()可以用来制作登录页面。
本文将介绍如何创建一个真正的登录页面，就像HTML页面一样，可以使用链接在页面之间跳转。
首先，导入必要的库。可能对这些库都很熟悉。
import dashimport dash_core_components as dccimport dash_html_components as htmlfrom dash.dependencies import Output,Input,State
接下来是初始化应用。dash.Dash()会调用应用实例。
app = dash.Dash(__name__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=True)
需要确保suppress_callback_exceptions设置为true，以便在不同页面之间导航。如果不设置为true，将会出现与调用相关的错误。
让从布局开始。
app.layout = html.Div([ dcc.Location(id='url', refresh=False), html.Div(id='page-content')])
dcc.Location决定显示的当前页面。它代表浏览器的地址栏。下面的div显示指定URL的内容。选定的路径名将作为参数传递给此位置组件，并相应地显示页面内容。将在进一步的解释中看到这一点。刷新约束只是用于确定是否在位置更新时刷新页面。
现在让创建包含用户名和密码输入框以及验证按钮的首页。这将是出现的第一个页面。
index_page = html.Div([ html.Div( dcc.Input(id="user", type="text", placeholder="输入用户名",className="inputbox1", style={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'60px', 'font-size':'16px','border-width':'3px','border-color':'#a0a3a2' }) ), html.Div( dcc.Input(id="passw", type="text", placeholder="输入密码",className="inputbox2", style={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'10px', 'font-size':'16px','border-width':'3px','border-color':'#a0a3a2', }) ), html.Div( html.Button('验证', id='verify', n_clicks=0, style={'border-width':'3px','font-size':'14px'}), style={'margin-left':'45%','padding-top':'30px'}), html.Div(id='output1')])
@app.callbackdash.dependencies.Output('output1', 'children'),[dash.dependencies.Input('verify', 'n_clicks')],state=[State('user', 'value'),State('passw', 'value')])
def update_output(n_clicks, uname, passw): li={'shraddha':'admin123'} if uname =='' or uname == None or passw =='' or passw == None: return html.Div(children='',style={'padding-left':'550px','padding-top':'10px'}) if uname not in li: return html.Div(children='用户名不正确',style={'padding-left':'550px','padding-top':'40px','font-size':'16px'}) if li[uname]==passw: return html.Div(dcc.Link('权限已授予！', href='/next_page',style={'color':'#183d22','font-family': 'serif', 'font-weight': 'bold', "text-decoration": "none",'font-size':'20px'}),style={'padding-left':'605px','padding-top':'40px'}) else: return html.Div(children='密码不正确',style={'padding-left':'550px','padding-top':'40px','font-size':'16px'})
上述代码创建了两个输入框，第一个用于用户名，第二个用于密码。与只允许单个输入框的普通按钮不同，需要在列表中定义'State'，以便从多个输入框中获取输入，然后更新点击按钮（本例中为验证）时的输出。
在update_output中，首先定义一个包含所有有效用户名和对应密码的字典'li'。第一个'if'条件只是为了在开始时不显示任何内容。然后检查无效/有效的用户名，如果用户名在'li'中，则被认为是有效的，然后检查密码是否适用于给定的用户名，如果两者都正确，那么将获得一个链接，上面写着'权限已授予'，点击该链接，可以跳转到所需的页面。
在dcc.Link中，第一个参数是将显示为链接的文本，href是为特定页面设置的'pathname'。将看到这些链接是如何定义的，以及路径名是如何分配的。其余部分只是格式化，使其看起来更漂亮。
这是主Dash应用。以下代码只是为了解释目的的基本Dash代码。
next_page = html.Div([ html.Div(dcc.Link('注销', href='/',style={'color':'#bed4c4','font-family': 'serif', 'font-weight': 'bold', "text-decoration": "none",'font-size':'20px'}),style={'padding-left':'80%','padding-top':'10px'}), html.H1(children="这是下一页，主页面",className="ap",style={ 'color':'#89b394','text-align':'center','justify':'center','padding-top':'170px','font-weight':'bold', 'font-family':'courier', 'padding-left':'1px' })])
可以根据需要添加其他组件。如所见，在本页的右上角提供了一个'注销'按钮，可以将带回登录页面并注销。链接的格式设置使其看起来不像典型的带有下划线的蓝色链接，这使其看起来更美观。
已经尽量包含了所需的最大格式化，这样就不必去寻找这些小修改。
最后也是最重要的部分，即处理所有导航的部分，是定义路径。以下是如何做到这一点的。
@app.callback(dash.dependencies.Output('page-content', 'children'),[dash.dependencies.Input('url', 'pathname')])def display_page(pathname): if pathname == '/next_page': return next_page else: return index_page
必须为应用中使用的所有URL设置路径名。认为这非常不言自明，返回其路径名对应的相应部分。next_page是前面部分定义的Html div组件。
当然，运行应用。
if __name__=='__main__': app.run_server()