Vue 頁面權限控制和登錄驗證

更多文章

頁面權限控制

頁面權限控制是什麼意思呢？

就是一個網站有不一樣的角色，好比管理員和普通用戶，要求不一樣的角色能訪問的頁面是不同的。若是一個頁面，有角色越權訪問，這時就得作出限制了。

Vue 動態添加路由及生成菜單這是我寫過的一篇文章，
經過動態添加路由和菜單來作控制，不能訪問的頁面不添加到路由表裏，這是其中一種辦法。

另外一種辦法就是全部的頁面都在路由表裏，只是在訪問的時候要判斷一下角色權限。若是有權限就讓訪問，沒有權限就拒絕，跳轉到 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'
// 在進入一個頁面前會觸發 router.beforeEach 事件
router.beforeEach((to, from, next) => {
    if (to.meta.roles.includes(role)) {
        next()
    } else {
        next({path: '/404'})
    }
})

登錄驗證

網站通常只要登錄過一次後，接下來該網站的其餘頁面都是能夠直接訪問的，不用再次登錄。
咱們能夠經過 token 或 cookie 來實現，下面用代碼來展現一下如何用 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}`)
        }
    }
})

上述全部實現，均可以在個人vue輕量級後臺管理系統基礎模板項目裏找到