vue-router 用戶登陸

有些路由頁面需要用戶登陸之后才能訪問如（用戶中心），如果用戶沒有登陸就訪問這些頁面的話就應該轉換到登陸頁面，登陸成功之后在進入該頁面。

需要用到的知識點有：H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta).

 

路由配置

在路由頁面中添加auth字段信息用於驗證當前路由頁面是否需要登陸。

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/login",
            name: "login",
            component: () => import("./views/Login.vue")
        },
        {
            path: "/member",
            meta: {
                auth: true   // 用於判斷當前路由是否需要登陸
            },
            component: () => import('./views/Member.vue')
        }
    ]
});

 

全局前置操作

// 登陸驗證
const Token = "XH-TOKEN";
router.beforeEach((to, from, next) => {
    let validator = typeof to.meta.auth == "undefined" || !to.meta.auth || sessionStorage.getItem(Token);
    let result = validator ? {} : {
        name: "login",　　// 跳轉到命名路由
        query: {
            url: to.fullPath   // 做一個來源頁面，用於登陸成功之后跳轉
        }
    };
    next(result);
});

 

注意：登陸成功之后要用 sesionStorage.setItem設置會話值