需求背景：

最近接到這樣一個需求，點擊某個url要跳轉(zhuǎn)到某個系統(tǒng)的首頁。

實現(xiàn)思路：

首先，我們要明確一個點，系統(tǒng)中所有的操作都要攜帶Token去發(fā)送請求，而登錄一般是獲取Token的來源，點擊url實現(xiàn)跳轉(zhuǎn)，并不意味著，不需要登錄，只是我們在點擊url的過程中，去幫助用戶去做登錄跳轉(zhuǎn)的操作。達成了這個共識，我們就好去實現(xiàn)了，方案如下：

方案一：url中必須有某個標識，用于判斷是否免登錄，比如：http://localhost:8300/#/login?isFreeLogin=1

通過判斷isFreeLogin==1去判斷是否免登錄，如果免登錄，則通過固定的賬號、密碼或者是在url中攜帶賬號、密碼（不安全）。然后抓取url中的參數(shù)，調(diào)登錄接口，實現(xiàn)跳轉(zhuǎn)。具體的實現(xiàn)如下：

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: '頁面跳轉(zhuǎn)中...',
        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參數(shù),如果存在，則免登錄
  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的時候，給后端發(fā)一個請求，讓后端返回登錄賬號信息，然后前端調(diào)用登錄接口，實現(xiàn)頁面跳轉(zhuǎn)。

如果有更好的方案，歡迎評論、留言~文章來源地址http://www.zghlxwxcb.cn/news/detail-552775.html

到了這里，關(guān)于Vue實現(xiàn)免密登錄跳轉(zhuǎn)的方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！