vue实战——登录过期【详解】-摩杜云开发者社区

登录过期逻辑

现在普遍的登录权限校验方式是JWT （json web token），当登录成功时，前端页面会获得一个 token ，每个 token 都设置了过期时间，通过解析 token 即可判断出 token 是否过期。

token 过期，即登录过期。

核心技术

前端项目安装依赖 jsonwebtoken 和 dayjs

cnpm i -S jsonwebtoken
cnpm i -S dayjs

src\router\index.js 中使用它们

import jwt from "jsonwebtoken";
import moment from "dayjs";

解析token

const payload = jwt.decode(token);

判断token是否过期

moment().isAfter(moment(payload.exp * 1000))

moment() 即当前时间
moment(payload.exp * 1000) 是token的过期时间
isAfter() 用于判断当前时间是否晚于token的过期时间

完整代码范例

src\router\index.js

import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
import { store_State_init } from "@/store";
import jwt from "jsonwebtoken";
import moment from "dayjs";
import { Message } from "element-ui";

Vue.use(VueRouter);

const routes = [
  { path: "/", redirect: "/index/content" },
  {
    path: "/index",
    component: (resolve) => require(["@/views/index/index.vue"], resolve),
    children: [
      {
        path: "content",
        name: "首页的内容（首页中的首页）",
        component: (resolve) => require(["@/views/index/content.vue"], resolve),
      },
      {
        path: "members",
        name: "成员",
        component: (resolve) => require(["@/views/members/index.vue"], resolve),
      },
      // 博客
      {
        path: "blog",
        meta: { requiresAuth: true },
        component: (resolve) => require(["@/views/blog/index.vue"], resolve),
      },
      {
        path: "*",
        component: (resolve) =>
          require(["@/views/otherPages/404.vue"], resolve),
      },
    ],
  },
  // 注册
  {
    path: "/register",
    component: (resolve) => require(["@/views/register/index.vue"], resolve),
  },
  // 登录
  {
    path: "/login",
    component: (resolve) => require(["@/views/login/index.vue"], resolve),
  },
  // 作品
  {
    path: "/index/works",
    component: (resolve) => require(["@/views/works/index.vue"], resolve),
  },
  // 重置密码
  {
    path: "/resetPassword",
    component: (resolve) =>
      require(["@/views/resetPassword/index.vue"], resolve),
  },
  // 用户中心
  {
    path: "/userCenter",
    meta: { requiresAuth: true },
    component: (resolve) => require(["@/views/userCenter/index.vue"], resolve),
  },
  // 404 表示请求的页面不存在、已被删除或无法访问
  {
    path: "/404",
    component: (resolve) => require(["@/views/otherPages/404.vue"], resolve),
  },
  // 未匹配到的路由，重定向到 /404
  { path: "*", redirect: "/404" },
];

const router = new VueRouter({
  routes,
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const token = store.state.token;
  if (token) {
    const payload = jwt.decode(token);
    // token过期 —— 当前时间超过token的过期时间
    if (moment().isAfter(moment(payload.exp * 1000))) {
      sessionStorage.clear();
      // 重置 vuex
      store.replaceState(store_State_init);

      Message({
        offset: 150,
        message: "登录已过期！",
        type: "warning",
      });
    }
  }

  // 需鉴权的路由—— 判断路由的meta元数据中，是否requiresAuth为true
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    // 判断用户是否已登录
    if (store.state.isLogin) {
      // 已登录，则跳转到目标路由（需要用户登录的页面）
      next();
    } else {
      // 未登录，跳转到登录页
      next("/login");
    }
  } else {
    // 公共页面，直接跳转到目标路由
    next();
  }
});

export default router;