前端判断用户登录状态方法

Posted 2023-05-01

参考技术A 方法一：

登录成功后，后端返回一个 cookie，根据这个 cookie 的有无来判断；退出登录时，后端会删除这个 cookie；

方法二：

登录成功后，前端设置 cookie，比如'isLogin = true'，根据isLogin的值去判断；退出登录时删除 cookieisLogin或设置  'isLogin = false'。

方法三：

1、前端发送登录请求

2、后端返回 token，前端得到后端返回的 token，将其写入到 localStorage（或sesstionStorage） 中，后续请求中都携带 token

3、后端判断 token 是否过期，如果过期就对前台的请求响应过期标识或者状态码

4、前端得到过期标识后，清除 localStorage（或sesstionStorage）中的 token，然后重定向到 login 路由

    以上这是我知道的三种方法，最常用的是第三种，如果谁还有其他的判断方法，欢迎在下方留言。

前端防止url输入地址直接访问页面

首先，解决这个问题要搞明白此url是从程序内部跳转还是直接在地址栏输入的，如果是程序内部跳转，那就好办啦。方法如下：

　　判断用户是否登录状态，是否携带token

　　使用router.beforeEach注册一个全局前置守卫，判断用户是否登录。

　　

router.beforeEach((to, from, next) => 
   if (to.path === ‘/login‘) 
      next();
      console.log(next)
    else // 每次页面跳转执行，token或openId錯誤，均提示跳转到首页
      let token = sessionStorage.getItem(‘token‘);
      console.log(token)
      if (token === null || token === ‘‘ || token === undefined) 
         Toast(‘token错误，请重新登录‘)
         setTimeout(function () 
            next(‘/login‘);
         ,1000)
      else
         next();
      
   
);

　

 HttpRequestServlet.getHeader(‘Referer’)的值如果是空的，说明此url是地址栏直接访问的，像这种的需要拦截，然后时期返回登录页面！反之则是从程序内部跳转，可以放行！