vue3简单使用路由守卫

最新推荐文章于 2025-05-13 18:00:00 发布

原创最新推荐文章于 2025-05-13 18:00:00 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

在登录之后，我们会存储一个token，并且设置一段时间的有效期

function handleSubmit(valid, { username, password }) {
    if (valid) {
        if (username === 'lin' && password === '123456') {
            //this.$Message.info('This is a info tip');
            Message.success('登录成功');
            store.commit('setUsername', username);
            store.commit('setSelectedMenuName', '1');
            const expirationTime = Date.now() + 2 * 60 * 60* 1000; // 2小时后的时间戳
            localStorage.setItem('token', 'lin');
            localStorage.setItem('token_expiration', expirationTime.toString());
            router.push('/');
        } else {
            // 可以在这里处理验证失败或用户名/密码不匹配的情况
            console.error('Invalid username or password, or form is not valid.');
        }
    }
}
</script>

在这里：

localStorage本身没有过期机制，所以需要自己实现一个。一种常见的方法是在存储token的同时，也存储一个时间戳，这里表示token的过期时间（2个小时后）。

在路由中设置：

// 全局守卫：登录拦截 本地没有存token,请重新登录
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  const expirationTimeStr = localStorage.getItem('token_expiration') ?? '0';
  const expirationTime = parseInt(expirationTimeStr, 10);

  if (!token) {
    // 没有token，重定向到登录页面
    if (to.name !== 'login') {
      next({ name: 'login' });
    } else {
      next();
    }
  } else if (Date.now() > expirationTime) {
    // token已过期，清除token并重定向到登录页面
    Message.success('身份过期，请重新登录');
    localStorage.removeItem('token');
    localStorage.removeItem('token_expiration');
    if (to.name !== 'login') {
      next({ name: 'login' });
    } else {
      next();
    }
  } else {
    // token有效，继续路由
    next();
  }
});