vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面

更新時(shí)間：2024年01月05日 09:18:18 作者：小跳不會(huì)Coding

本文主要介紹了vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面,vue限制不登錄,通過(guò)url進(jìn)入其他頁(yè)面強(qiáng)制回到登錄頁(yè)面；已經(jīng)登錄的情況下,不可以再進(jìn)入登錄界面,感興趣的可以了解一下

1.先在router下的index.js添加 meta:{requireAuth:true}，如下：

{
  path: '/data',
  name: 'data',
  component: data,
  meta:{requireAuth:true}
},

2.然后在main.js添加如下代碼：

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限
    if(localStorage.getItem('userInfo')){ //判斷本地是否存在access_token
      next();
    }else {
     if(to.path === '/login'){
        next();
      }else {
        alert('請(qǐng)先進(jìn)行登錄！')
        next({
          path:'/login'
        })
      }
    }
  }
  else {
    next();
  }
  /*如果本地 存在 token 則 不允許直接跳轉(zhuǎn)到 登錄頁(yè)面*/
  if(to.fullPath == "/login"){
    if(localStorage.getItem('userInfo')){
      alert('您已經(jīng)登錄了，如果想要登錄其他賬號(hào)，請(qǐng)先退出當(dāng)前賬號(hào)！')
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
  }
});

或者是：

router.beforeEach((to, from, next)=> {
 let userInfo = localStorage.getItem('userInfo')
 let list = ['login','checking','register','phoneLogi','chat','GroupSharing','new_file','videoChat',]//多個(gè)路由
 if (userInfo || list.indexOf(to.name) !== -1) {
   next()
 }
 else {
   next({
     name:'login'
   })
 }
  // next()
})

到此這篇關(guān)于vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面的文章就介紹到這了,更多相關(guān)vue限制登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目初始化過(guò)程中錯(cuò)誤總結(jié)
在Vue.js項(xiàng)目初始化和構(gòu)建過(guò)程中,可能會(huì)遇到多種問(wèn)題,首先,npm?install過(guò)程中報(bào)錯(cuò),如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時(shí),若出現(xiàn)core-js相關(guān)錯(cuò)誤
2024-09-09
前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vite+vue3+ts項(xiàng)目新建以及解決遇到的問(wèn)題
vite是一個(gè)基于Vue3單文件組件的非打包開發(fā)服務(wù)器,它具有快速的冷啟動(dòng),不需要等待打包操作,下面這篇文章主要給大家介紹了關(guān)于vite+vue3+ts項(xiàng)目新建以及解決遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2023-06-06
Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue同步父子組件和異步父子組件的生命周期順序問(wèn)題
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問(wèn)題,需要的朋友可以參考下
2018-10-10
vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)
周所周知vue的props是單向數(shù)據(jù)流,可以從父組件中改變傳往子組件的props,反之則不行,下面這篇文章主要給大家介紹了關(guān)于vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vuex實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
利用Vue3指令實(shí)現(xiàn)水印背景詳解
這篇文章主要為大家介紹了利用Vue3指令實(shí)現(xiàn)水印背景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Vue3如何在setup中獲取元素引用(ref)
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue加載中動(dòng)畫組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue加載中動(dòng)畫組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03