快捷導(dǎo)航

vue限制實現(xiàn)不登錄無法進(jìn)入其他頁面

更新時間：2024年01月05日 09:18:18 作者：小跳不會Coding

本文主要介紹了vue限制實現(xiàn)不登錄無法進(jìn)入其他頁面,vue限制不登錄,通過url進(jìn)入其他頁面強(qiáng)制回到登錄頁面；已經(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('請先進(jìn)行登錄！')
        next({
          path:'/login'
        })
      }
    }
  }
  else {
    next();
  }
  /*如果本地 存在 token 則 不允許直接跳轉(zhuǎn)到 登錄頁面*/
  if(to.fullPath == "/login"){
    if(localStorage.getItem('userInfo')){
      alert('您已經(jīng)登錄了，如果想要登錄其他賬號，請先退出當(dāng)前賬號！')
      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',]//多個路由
 if (userInfo || list.indexOf(to.name) !== -1) {
   next()
 }
 else {
   next({
     name:'login'
   })
 }
  // next()
})

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

您可能感興趣的文章:

相關(guān)文章

webpack如何將vue3單頁面應(yīng)用改造成多頁面應(yīng)用
這篇文章主要介紹了webpack如何將vue3單頁面應(yīng)用改造成多頁面應(yīng)用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-05-05
解析vue路由異步組件和懶加載案例
這篇文章主要介紹了解析vue路由異步組件和懶加載案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
element ui里dialog關(guān)閉后清除驗證條件方法
下面小編就為大家分享一篇element ui里dialog關(guān)閉后清除驗證條件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue init webpack 建vue項目報錯的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項目報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
一起來學(xué)習(xí)Vue的組件化
這篇文章主要為大家詳細(xì)介紹了Vue的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Vue的路由動態(tài)重定向和導(dǎo)航守衛(wèi)實例
下面小編就為大家分享一篇Vue的路由動態(tài)重定向和導(dǎo)航守衛(wèi)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue3集成Leaflet實現(xiàn)一個功能完整的地圖可視化組件
在現(xiàn)代 Web 應(yīng)用中,地圖可視化是一個常見的需求,無論是展示位置信息、軌跡追蹤,還是數(shù)據(jù)統(tǒng)計分析,地圖都能提供直觀的視覺體驗,本文將詳細(xì)介紹如何在 Vue 3 項目中集成 Leaflet 地圖庫,實現(xiàn)一個功能完整的地圖可視化組件,需要的朋友可以參考下
2026-01-01
vue2.x中的provide和inject用法小結(jié)
這篇文章主要介紹了vue2.x中的provide和inject用法小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
vue?cli使用iview自定義主題遇到的坑及解決
vue?cli使用iview自定義主題遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
讓ChatGPT解讀Vue3源碼過程解析
這篇文章主要為大家介紹了讓ChatGPT解讀Vue3源碼過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02