以 vue + vue-router 为例

// 不重定向白名单 不需要登录能够访问的页面
const whiteList = ['/login', '/register']

const isLogin = () => {
  // 从cookie, sessionStorage或者localStorage中判断是否存在登录用户信息
  return cookie.get('token') || sessionStorage.getItem('token')
}

// 在路由跳转之前， 进行登录检查
router.beforeEach((to, from, next) => {
  // 开启页面载入进度条
  NProgress.start()

  // 判断是否已经登录
  if (isLogin()) {
    // 校验用户信息是否完整
    // 判断用户信息是否完整 token, userName, email等

    // 已登录用户访问 /login 页面
    if (to.path === '/login') {
      // 重定向到根路径
      next({ path: '/' })
      NProgress.done()
    } else {
      // 检查是否有访问权限
      if (需要访问权限) {
        // 如果有访问权限允许访问；否则，跳转到403禁止访问页面
        rolePermission(to.meta.option) ? next() : next({path: 'noauth'})
        NProgress.done()
      } else {
        // 不需要访问权限
        next()
      }
    }
  } else {
    // 未登录用户访问
    if (whiteList.indexOf(to.path) !== -1) {
      // 如果当前所访问路由在白名单中，允许访问
      next()
    } else {
      // 如果当前访问路由不在白名单中  重定向到登录页面
      // 在登录页面完成登录操作之后 讲登录用户信息保存到cookie或者sessionStorage中， 然后重定向到query中指定的redirect路径
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
      NProgress.done()
    }
  }
})

登陆状态

1. cookie
   服务器端设置，客户端获取之后 在后续的请求中自动带上

   通过jsonwebtoken 生成访问token  返回给客户端
   https://github.com/auth0/node-jsonwebtoken

2. accessToken
   通过登陆接口获取accessToken， 存在本地的cookie或者sessionStorage中
   每次请求接口的时候 带上该token （放在header的Authorization属性中带过去， 后端比较容易获取）

系统退出

case: 强制关闭浏览器或者关机

solution: 都会触发 window 的 beforeunload/unload 事件，可以在这两个事件中做一些处理