使用vue router怎么實現(xiàn)用戶登陸功能

這篇文章給大家介紹使用vue router怎么實現(xiàn)用戶登陸功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

路由配置

在路由頁面中添加auth字段信息用于驗證當(dāng)前路由頁面是否需要登陸。

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  // 用于判斷當(dāng)前路由是否需要登陸
      },
      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",　　// 跳轉(zhuǎn)到命名路由
    query: {
      url: to.fullPath  // 做一個來源頁面，用于登陸成功之后跳轉(zhuǎn)
    }
  };
  next(result);
});

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

關(guān)于使用vue router怎么實現(xiàn)用戶登陸功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。