后台管理系统前端登录逻辑 - 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守卫访问登录接口。