后台管理系统前端登录逻辑 - BISTU-CETC/order_system GitHub Wiki

登录逻辑

访问/,则等价于访问/user:

{
  path: '/',
  component: Layout,
  redirect: '/user',
  hidden: true,
}

全局守卫:访问任何页面前,判断是否带有token,是则放行;否则跳转到登录页面,并将页面路径作为query传递给login页面,作为登录后自动跳转的页面;如果访问的是login页面,放行。

//全局路由白名单
const whiteList = ['/login', '/404']

//全局路由守卫,不拦截/login
router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()

  //设置跳转页面的标题
  document.title = getPageTitle(to.meta.title)

  //判断用户是否登录
  const hasToken = getToken()

  //如果已经登录,守卫放行
  if (hasToken) {
    next()
    NProgress.done()
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      //如果没有登录,守卫拦截重定向到登录页面
      let redirect = `/login?redirect=${to.path}`
      next(redirect)
      NProgress.done()
    }
  }
})

login守卫:如果没有携带code,进入login页面扫码;如果携带code,访问接口登录。

beforeEnter: (to, from, next) => {
  const code = to.query.code
  //如果没有携带code,进入登录页面
  if (!code) {
    next()
  } else {
    //如果携带code,访问登录接口
    store.dispatch('user/login', code)
      .then(
        //登录成功,访问
        (res) => {
          debugger
          const redirect = store.getters['settings/getRedirect']
          console.log("redirect:" + redirect);
          next(redirect || "/user")
        },
        //登录失败,重新访问登录接口,带上错误参数
        (err) => {
          let errMsg = ""

          if (err.code == 101) {
            errMsg = "您的信息未完善"
          } else if (err.code == 116) {
            errMsg = "您未在小程序注册过"
          }
          else if (err.code == 112) {
            errMsg = "您不是管理员"
          } else if (err.code == 119) {
            errMsg = "您的账户已锁定"
          } else {
            errMsg = err.message
          }
          next(`/login?errMsg=${errMsg}`)
        })

  }
}

登录示意图

login页面:

进入页面后将redirect参数记录到全局,并缓存到本地(localStorage),扫码后跳转回到/login?code=xxx&status=xxx页面。由login守卫访问登录接口。