vue限制實現(xiàn)不登錄無法進入其他頁面
更新時間：2024年01月05日 09:18:18 作者：小跳不會Coding
本文主要介紹了vue限制實現(xiàn)不登錄無法進入其他頁面,vue限制不登錄,通過url進入其他頁面強制回到登錄頁面；已經(jīng)登錄的情況下,不可以再進入登錄界面,感興趣的可以了解一下
vue限制不登錄，通過url進入其他頁面強制回到登錄頁面；已經(jīng)登錄的情況下，不可以再進入登錄界面
參數(shù)說明：
- to: Route: 即將要進入的目標（路由對象）
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
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('請先進行登錄！')
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)不登錄無法進入其他頁面的文章就介紹到這了,更多相關(guān)vue限制登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue.js項目初始化和構(gòu)建過程中,可能會遇到多種問題,首先,npm?install過程中報錯,如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時,若出現(xiàn)core-js相關(guān)錯誤2024-09-09
前端vue中實現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vite是一個基于Vue3單文件組件的非打包開發(fā)服務(wù)器,它具有快速的冷啟動,不需要等待打包操作,下面這篇文章主要給大家介紹了關(guān)于vite+vue3+ts項目新建以及解決遇到的問題的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)星級評價效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問題,需要的朋友可以參考下2018-10-10
vue3子組件如何修改父組件傳過來的props數(shù)據(jù)
周所周知vue的props是單向數(shù)據(jù)流,可以從父組件中改變傳往子組件的props,反之則不行,下面這篇文章主要給大家介紹了關(guān)于vue3子組件如何修改父組件傳過來的props數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vuex實現(xiàn)一個簡易計數(shù)器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家介紹了利用Vue3指令實現(xiàn)水印背景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細介紹了Vue加載中動畫組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03