Vue 頁面權限控制和登陸驗證功能的實例代碼
頁面權限控制
頁面權限控制是什么意思呢？
就是一個網站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權訪問，這時就得做出限制了。
Vue 動態(tài)添加路由及生成菜單 這是我寫過的一篇文章，
通過動態(tài)添加路由和菜單來做控制，不能訪問的頁面不添加到路由表里，這是其中一種辦法。
另一種辦法就是所有的頁面都在路由表里，只是在訪問的時候要判斷一下角色權限。如果有權限就讓訪問，沒有權限就拒絕，跳轉到 404 頁面。
思路：
在每一個路由的 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸后，將用戶的角色返回。然后在訪問頁面時，把路由的 meta 屬性和用戶的角色進行對比，如果用戶的角色在路由的 roles 里，那就是能訪問，如果不在就拒絕訪問。
代碼示例：
路由信息
routes: [
{
path: '/login',
name: 'login',
meta: {
roles: ['admin', 'user']
},
component: () => import('../components/Login.vue')
},
{
path: 'home',
name: 'home',
meta: {
roles: ['admin']
},
component: () => import('../views/Home.vue')
},
]
頁面控制
// 假設角色有兩種：admin 和 user
// 這里是從后臺獲取的用戶角色
const role = 'user'
// 在進入一個頁面前會觸發(fā) router.beforeEach 事件
router.beforeEach((to, from, next) => {
if (to.meta.roles.includes(role)) {
next()
} else {
next({path: '/404'})
}
})
登陸驗證
網站一般只要登陸過一次后，接下來該網站的其他頁面都是可以直接訪問的，不用再次登陸。
我們可以通過 token 或 cookie 來實現(xiàn)，下面用代碼來展示一下如何用 token 控制登陸驗證。
router.beforeEach((to, from, next) => {
// 如果有token 說明該用戶已登陸
if (localStorage.getItem('token')) {
// 在已登陸的情況下訪問登陸頁會重定向到首頁
if (to.path === '/login') {
next({path: '/'})
} else {
next({path: to.path || '/'})
}
} else {
// 沒有登陸則訪問任何頁面都重定向到登陸頁
if (to.path === '/login') {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
上述所有實現(xiàn)，都可以在我的 vue輕量級后臺管理系統(tǒng)基礎模板 項目里找到
總結
以上所述是小編給大家介紹的Vue 頁面權限控制和登陸驗證功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
- vue實現(xiàn)登陸登出的實現(xiàn)示例
- Vue2.0 axios前后端登陸攔截器(實例講解)
- vue+axios新手實踐實現(xiàn)登陸的示例代碼
- 詳解用vue.js和laravel實現(xiàn)微信授權登陸
- 基于vue-cli3和element實現(xiàn)登陸頁面
- Vue 前端實現(xiàn)登陸攔截及axios 攔截器的使用
- 詳解vue2.0+axios+mock+axios-mock+adapter實現(xiàn)登陸
- 詳解springboot和vue前后端分離開發(fā)跨域登陸問題
- vue+koa2實現(xiàn)session、token登陸狀態(tài)驗證的示例
- vue實現(xiàn)登陸功能
相關文章
el-table實現(xiàn)搜索高亮展示并滾動到元素位置的操作代碼
這篇文章主要介紹了el-table實現(xiàn)搜索高亮展示并滾動到元素位置,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
本文主要介紹了vue中添加語音播報功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue導入excel文件,vue導入多個sheets的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
解決vue中使用Axios調用接口時出現(xiàn)的ie數(shù)據處理問題
今天小編就為大家分享一篇解決vue中使用Axios調用接口時出現(xiàn)的ie數(shù)據處理問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue3 源碼導讀(推薦)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue項目啟動如何設置默認啟動頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關于Vue圖片裁剪組件的相關資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應該都很熟悉了吧,需要的朋友可以參考下2021-07-07
electron-vue+electron-updater實現(xiàn)自動更新(步驟源碼)
這篇文章主要介紹了electron-vue+electron-updater實現(xiàn)自動更新,步驟源碼包括autoUpdater.js操控更新js文件，main.js也就是package.json內的main指向的js文件，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關于vue實現(xiàn)移動端table表格簡單方法的相關資料,使用Vue.js開發(fā)移動應用程序時,經常需要使用各種UI組件,其中el-table是一個常用的表格組件,可以方便地展示數(shù)據,需要的朋友可以參考下2023-09-09