如何防止未登錄的用戶訪問 admin 路由？

Question

在我的應用程序中，用戶沒有帳戶，因此默認情況下每個注冊帳戶都是管理員帳戶。 當管理員登錄時，他會收到一個有效的令牌，他可以使用該令牌向后端發出 POST 請求並創建/更新/刪除內容。

這是我的問題 - 即使非管理員無法通過管理面板創建/讀取/更新/刪除內容，因為他們沒有有效的令牌並且后端拒絕他們的 POST 請求，他們仍然可以訪問管理面板通過導航到/admin 。

我可以通過檢查 Vuex 用戶 object 是否為空來檢查用戶是否已登錄，如果用戶未登錄，則將用戶重定向到家，但如果用戶願意，我很漂亮，他可以欺騙登錄（令牌仍然無效）。

這里最好的做法是什么？

Answer 1

最佳實踐是使用vue-session-npm並在管理員成功登錄后生成 session。 然后您可以檢查 session 是否存在。 如果存在，則授予使用 /admin 路由器的權限或將用戶重定向到登錄頁面。 要了解更多瀏覽 session 和 cookies 使用。

Answer 2

您可以在您的路由器上注冊一個全局的 before 將在每次調用時執行，您可以檢查用戶權限。

詳細信息： https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

router.beforeEach((to, from, next) => {
    // ...
})

要創建更結構化的方式，您可以在router.js上添加元數據

您可以將用戶角色添加到您的 TOKEN

{
    path: '/admin/path',
    meta: { requiresAuth: true, roles:[ADMIN, MANAGER] }
}

ADMIN、MANAGER 可以是字符串、數字，這取決於您的邏輯。

所以beforeEach就像：

router.beforeEach((to,from,next) => {
    //get the authenticated user 
    const authUser = store.getters.getUser
    //check sensitive routes
    if (to.meta.requiresAuth) {
        if (!authUser) {
            next('/login')
        } else {
            //check user ROLE/Permission
            if (hasPermission(authUser, to.meta.roles)) {
                next()
            } else {
                next('/unauthorized')
            }
        }
    } else {
        next();
    }
})

hasPermission function 僅檢查經過身份驗證的用戶是否具有允許他訪問路徑的角色。