Vue实现免密登录跳转的方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue实现免密登录跳转的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求背景：

最近接到这样一个需求，点击某个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的时候，给后端发一个请求，让后端返回登录账号信息，然后前端调用登录接口，实现页面跳转。

如果有更好的方案，欢迎评论、留言~文章来源地址https://www.toymoban.com/news/detail-552775.html

到了这里，关于Vue实现免密登录跳转的方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！