UniversalRouter Auth&Redirect

HTML

<script src="https://unpkg.com/universal-router@3/universal-router.js"></script>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/login">Login</a></li>
  <li><a href="/admin/users">Users</a> (auth required)</li>
  <li><a href="/admin/user/456">User #456</a> (auth required)</li>
</ul>
<h1>Page Name</h1>
<p>Current location: <span>/</span></p>
<p><label><input type="checkbox" /> Authorized</label></p>
<p><label><input type="checkbox" /> Redirect</label></p>

JavaScript

// import UniversalRouter from 'universal-router'

let authorized = false
let redirect = false

const router = new UniversalRouter([{
    path: '/',
    action: () => 'Home'
  },
  {
    path: '/login',
    action: () => 'Login'
  },
  {
    path: '/admin',
    children: [{
        path: '/users',
        action: () => 'Users'
      },
      {
        path: '/user/:id',
        action: (ctx) => `User #${ctx.params.id}`
      }
    ],
    action(ctx) {
      if (!authorized) {
        return 'Access Denied!'
      }
      return ctx.next()
    }
  }
])

const container = document.querySelector('h1')
const currentPath = document.querySelector('span')

function render() {
  return router.resolve(location.pathname).then(page => {
    if (redirect && page === 'Access Denied!') {
      history.replaceState(null, 'Login', '/login')
      return render()
    }
    container.innerHTML = page
    currentPath.textContent = location.pathname
  })
}

const checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes[0].addEventListener('change', event => {
  authorized = event.target.checked
})
checkboxes[1].addEventListener('change', event => {
  redirect = event.target.checked
})

window.addEventListener('click', event => {
  if (event.target.tagName === 'A') {
    event.preventDefault()
    const anchor = event.target
    const state = null
    const title = anchor.textContent
    const url = anchor.pathname + anchor.search + anchor.hash
    history.pushState(state, title, url)
    render()
  }
})

history.replaceState(null, '', '/')
render()