有些路由頁面需要用戶登陸之後才能訪問如(用戶中心),如果用戶沒有登陸就訪問這些頁面的話就應該轉換到登陸頁面,登陸成功之後在進入該頁面。 需要用到的知識點有:H5中的會話存儲(sessionStorage)、vue-router路由前置操作、路由元信息(meta). 路由配置 在路由頁面中添加auth ...
有些路由頁面需要用戶登陸之後才能訪問如(用戶中心),如果用戶沒有登陸就訪問這些頁面的話就應該轉換到登陸頁面,登陸成功之後在進入該頁面。
需要用到的知識點有: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設置會話值