如何阻止shinyauthr认证前Shiny应用侧边栏提前显示？

问题根源在于：默认的sidebarPanel容器在页面初始化时就会被渲染，即便内部的uiOutput还没有内容，容器自带的边框、背景样式仍会显示，导致出现灰色小矩形。要实现登录后才显示侧边栏，需要让整个侧边栏容器（甚至包含sidebarLayout）仅在认证通过后才渲染。

方案一：使用conditionalPanel结合认证状态 #

利用shinyauthr返回的认证状态，通过conditionalPanel控制sidebarLayout的显示，未登录时不渲染该布局：

library(shiny)
library(shinyauthr)
library(tibble)

user_base <- tibble(
  user = c("user1"),
  password = c("pass1"),
  permissions = c("admin"),
  name = c("User One")
)

ui <- fluidPage(
  div(class = "pull-right", shinyauthr::logoutUI(id = "logout")),
  shinyauthr::loginUI(id = "login"),
  # 仅当认证通过时渲染侧边栏布局
  conditionalPanel(
    condition = "output.user_auth",
    sidebarLayout(
      sidebarPanel(uiOutput("sidebarpanel")),
      mainPanel(uiOutput("mainpanel"))
    )
  )
)

server <- function(input, output, session) {
  
  credentials <- shinyauthr::loginServer(
    id = "login",
    data = user_base,
    user_col = user,
    pwd_col = password,
    log_out = reactive(logout_init())
  )
  
  logout_init <- shinyauthr::logoutServer(
    id = "logout",
    active = reactive(credentials()$user_auth)
  )
  
  # 输出认证状态供前端判断，设置suspendWhenHidden确保始终生效
  output$user_auth <- reactive({
    credentials()$user_auth
  })
  outputOptions(output, "user_auth", suspendWhenHidden = FALSE)
  
  output$sidebarpanel <- renderUI({
    req(credentials()$user_auth)
    tagList(
      numericInput("flank",
                   "Flank (bp)",
                   value = 110, min = 0, max = NA),
      numericInput("correction",
                   "Correction (repeats)",
                   value = 0, min = 0, max = NA)
    )
  })
  
  output$mainpanel <- renderTable({
    req(credentials()$user_auth)
    data.frame("Flank" = input$flank,
               "Correction" = input$correction)
  })
 
}
    
shinyApp(ui = ui, server = server)

方案二：在Server端渲染整个侧边栏布局 #

把sidebarLayout放到renderUI中，用req(credentials()$user_auth)控制，未登录时不生成该布局：

library(shiny)
library(shinyauthr)
library(tibble)

user_base <- tibble(
  user = c("user1"),
  password = c("pass1"),
  permissions = c("admin"),
  name = c("User One")
)

ui <- fluidPage(
  div(class = "pull-right", shinyauthr::logoutUI(id = "logout")),
  shinyauthr::loginUI(id = "login"),
  # 用uiOutput承载整个侧边栏布局
  uiOutput("main_layout")
)

server <- function(input, output, session) {
  
  credentials <- shinyauthr::loginServer(
    id = "login",
    data = user_base,
    user_col = user,
    pwd_col = password,
    log_out = reactive(logout_init())
  )
  
  logout_init <- shinyauthr::logoutServer(
    id = "logout",
    active = reactive(credentials()$user_auth)
  )
  
  # 仅在认证通过后渲染完整侧边栏布局
  output$main_layout <- renderUI({
    req(credentials()$user_auth)
    sidebarLayout(
      sidebarPanel(
        numericInput("flank",
                     "Flank (bp)",
                     value = 110, min = 0, max = NA),
        numericInput("correction",
                     "Correction (repeats)",
                     value = 0, min = 0, max = NA)
      ),
      mainPanel(renderTable({
        data.frame("Flank" = input$flank,
                   "Correction" = input$correction)
      }))
    )
  })
 
}
    
shinyApp(ui = ui, server = server)

两种方案都能彻底消除未登录时的灰色矩形：方案一通过前端条件判断控制渲染，方案二直接在后端仅生成已认证后的布局结构。

内容的提问来源于stack exchange，提问作者Mike