Vue 頁面權(quán)限控制和登陸驗證

lastSeries 發(fā)布于2019-08-23 18:13 / 3048人閱讀

摘要：如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。我們可以通過或來實現(xiàn)，下面用代碼來展示一下如何用控制登陸驗證。

更多文章 頁面權(quán)限控制

頁面權(quán)限控制是什么意思呢？

就是一個網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。

Vue 動態(tài)添加路由及生成菜單這是我寫過的一篇文章，
通過動態(tài)添加路由和菜單來做控制，不能訪問的頁面不添加到路由表里，這是其中一種辦法。

另一種辦法就是所有的頁面都在路由表里，只是在訪問的時候要判斷一下角色權(quán)限。如果有權(quán)限就讓訪問，沒有權(quán)限就拒絕，跳轉(zhuǎn)到 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")
    },
]

頁面控制

// 假設(shè)角色有兩種：admin 和 user
// 這里是從后臺獲取的用戶角色
const role = "user"
// 在進入一個頁面前會觸發(fā) router.beforeEach 事件
router.beforeEach((to, from, next) => {
    if (to.meta.roles.includes(role)) {
        next()
    } else {
        next({path: "/404"})
    }
})

登陸驗證

網(wǎng)站一般只要登陸過一次后，接下來該網(wǎng)站的其他頁面都是可以直接訪問的，不用再次登陸。
我們可以通過 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)基礎(chǔ)模板項目里找到