前端判断用户是否登录

最新推荐文章于 2025-03-26 16:52:57 发布

yy_33404590

最新推荐文章于 2025-03-26 16:52:57 发布

阅读量4.1k

点赞数 3

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_33404590/article/details/128828196

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

文章讲述了前端如何利用JWT进行用户认证。用户登录后，服务器返回加密的token，存储在localStorage中，后续请求头携带token进行身份验证。同时，文中也提到了使用cookie来设置登录状态，以及后端通过sessionID在cookie中确认用户身份的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. token (又称为 JWT)

用户首次登录，服务器验证通过，将返回一个经过加密处理的 token 给浏览器；
浏览器通过 localStorage 存储 token，后续的请求在 header 中放入 token，通过请求拦截器实现，可能需要判断 token 的过期时间

服务器通过验证 token 的正确性，判断是否授权


// 存储token
  async login (params) {
    let rr = await login(params);
      if(rr.data.retCode === '0') {
        localStorage.setItem('token', res.data.token)
      }
  }
// header中添加token -- 请求拦截
Instance.interceptors.request.use(
    config => {
        const token = localStorage.getItem("token");
        if (token) {
            // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers['token'] = token;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
// 授权访问 --- 根据请求返回的状态码判断
   if(res.data.code === 'sxxx') { // token过期
    this.$router.push('/login');
    localStorage.removeItem('token')
   }

2. 设置 cookie, 登录成功后设置 isLogin=true,

setCookie('isLogin', true, 1); // 登录成功, 可以设置cookie的过期时间
setCookie('isLogin', false); // 退出登录

3. cookie中判断sessionId是否存在

登录成功后，后端会给前端返回 sessionID，若浏览器默认设置 Http-only，则前端拿不到。
用户首次请求登陆时，后端会将用户的相应信息存储 session 中,并在数据库中生成对应的 session 表，在响应客户端的时候，把前端对应的 Session ID 存放在 cookies 中，这样只要 cookies 没有过期，每一次请求都会携带对应的 ID ，后端就可以通过这个 ID 判断是哪一个用户，只要 cookies 没有过期，用户就是登陆状态。