Vue实现免密登录跳转的方式
首先,我们要明确一个点,系统中所有的操作都要携带Token去发送请求,而登录一般是获取Token的来源,点击url实现跳转,并不意味着,不需要登录,只是我们在点击url的过程中,去帮助用户去做登录跳转的操作。通过判断isFreeLogin==1去判断是否免登录,如果免登录,则通过固定的账号、密码或者是在url中携带账号、密码(不安全)。然后抓取url中的参数,调登录接口,实现跳转。方案二:通过后端
需求背景:
最近接到这样一个需求,点击某个url要跳转到某个系统的首页。
实现思路:
首先,我们要明确一个点,系统中所有的操作都要携带Token去发送请求,而登录一般是获取Token的来源,点击url实现跳转,并不意味着,不需要登录,只是我们在点击url的过程中,去帮助用户去做登录跳转的操作。达成了这个共识,我们就好去实现了,方案如下:
方案一:url中必须有某个标识,用于判断是否免登录,比如:http://localhost:8300/#/login?isFreeLogin=1
通过判断isFreeLogin==1去判断是否免登录,如果免登录,则通过固定的账号、密码或者是在url中携带账号、密码(不安全)。然后抓取url中的参数,调登录接口,实现跳转。具体的实现如下:
router.beforeEach((to, from, next) => {
NProgress.start()
const { isFreeLogin, password } = getQueryVariable()
const url = window.location.href
// 存在特殊字符的处理方式
const passwordPattern = /[!@#%$^\\| ]/
if (password && passwordPattern.test(password)) {
const newUrl = url.replace(/(password=)[^&]*/, `$1${tranAscii(password)}`) //密码中的特殊字符用一个别的特定字符替代
window.location.href = newUrl
} else {
if (Number(isFreeLogin) === 1 && to.path === '/login' && from.path == '/') {
loadingInstance = Loading.service({
background: 'rgba(255,255,255,0.1)',
text: '页面跳转中...',
customClass: 'login-loading',
spinner: 'el-icon-loading'
})
setFormData(() => {
next()
})
} else {
if (to.path === '/') return next('/login')
const token = localStorage.getItem('Admin-Token')
if (!token && to.path !== '/login') return next('/login')
next()
}
}
})
router.afterEach((to, from) => {
NProgress.done()
loadingInstance.close()
})
export default router
function setFormData(cb) {
// 判断url后是否携带?isFreeLogin=1参数,如果存在,则免登录
const { username, password, isFreeLogin } = getQueryVariable()
if (isFreeLogin && Number(isFreeLogin) === 1) {
if (username !== undefined && password !== undefined) {
Vue.prototype.loginForm = {
username: username.trim(),
password: password.trim() //此处密码要做同步处理
}
} else {
Message.error({
showClose: true,
message: '用户名或密码为空!'
})
cb && cb()
}
}
if (JSON.stringify(Vue.prototype.loginForm) !== '{}') {
handleLogin(Vue.prototype.loginForm, cb)
Vue.prototype.loginForm = {}
}
}
//登录逻辑
async handleLogin(form,cb){
try{
await login(form)
cb&&cb()
}catch{
cb&&cb()
}
}
要注意一下两个问题:
(1)url中因为携带了账号、密码,密码可能会存在特殊字符,如果后端接口做了特殊字符的过滤,可能会报400的错误
(2)要处理url中未携带账号密码的情况(你可以用个固定的账号、密码)以及账号、密码错误的情况。
以上代码包含了上述问题的处理
方案二:通过后端去处理。点击url的时候,给后端发一个请求,让后端返回登录账号信息,然后前端调用登录接口,实现页面跳转。
如果有更好的方案,欢迎评论、留言~
更多推荐
所有评论(0)