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

JaydenSun

于 2019-08-16 10:13:50 发布

阅读量5.5k

点赞数 1

文章标签：前端防止url输入地址直接访问页面

本文链接：https://blog.youkuaiyun.com/qq_15058285/article/details/99672480

版权

本文介绍如何使用前端路由守卫判断用户登录状态，通过检查token有效性来控制页面跳转，确保未登录用户被导向登录页。同时，探讨了直接地址栏访问的拦截策略。

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

首先，解决这个问题要搞明白此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是地址栏直接访问的，像这种的需要拦截，然后时期返回登录页面！反之则是从程序内部跳转，可以放行！
《完》