热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue地址栏直接输入URL跳过登录界面拦截不成功.

目前只有登录页面不需要token验证,其他页面都需要登录后才能进入(token有效),api请求的header中带token信息,在登录成功后将token存储在cookies中。

目前只有登录页面不需要token 验证,其他页面都需要登录后才能进入(token有效),api 请求的header中带token信息,在登录成功后将token存储在COOKIEs 中。 除了Login 外其他跳转都加requireAuth来判断。

目前没有登录的时候直接点击历史纪录中URL 直接就进到里边的页面了。
以本地tomcat 环境为例:http://172.21.81.206:8085/storemonitor_ui 这个url点击直接进入无法拦截,如果是下边的url则不登录无法进入。path:'/event'
http://172.21.81.206:8085/storemonitor_ui/#/login?redirect=%2Fevent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
//main.js 中的跳转拦截代码



import {getToken} from '@/common/auth'

router.beforeEach((to,from,next)=>{

  if(to.meta.requireAuth){ //要跳转的页面需要登陆权限

    if(getToken()){  //通过vuex state 获取当前的token信息

      next();

    }

    else{

      next({

        path:'/login',

        query:{redirect:to.fullPath}

      })

    }

  }

  else{

    next();

  }

})



//router

export default new Router({

  routes: [

    {

      path:'/login',

      name:'Login',

      component:Login,

      meta:{

        requireAuth: false,

      }

    },

    {

      path: '/',

      name: '总览',

      redirect:'/event',

      component: Home,

      iconCls:'iconfont icon-zonglan',

      leaf:true, //没有子节点

      children:[

        {

          path:'allscan',

          name:'总览',

          component:resolve=>require(['@/views/allscan/AllScan'],resolve),

          meta:{

            requireAuth: true,

          }

        }

      ]

    },

    {

      path: '/',

      name:'事件管理',

      component:Home,

      iconCls:'iconfont icon-shijian',

      leaf:true,

      children:[

        {

          path:'/event',

          name:'事件管理',

          component:resolve=>require(['@/views/event/EventManage'],resolve),

          meta:{

            keepAlive:true,  //the component is't to be cache.

            requireAuth: true,

          }

        },

        {

          path:'/event',

          name:'事件管理',

          component:resolve=>require(['@/views/event/details/RateManage'],resolve),

          meta:{

            requireAuth: true,

          },

          children:[

            {

              path:'/rate',

              name:'事件详情',

             component:resolve=>require(['@/views/event/details/RateManage'],resolve),

             

            }

          ]

        },

       

      ]

    }

    ])

   

    //store

    const state={

        token:getToken();

    },

    actions:{

        LoginByUser({commit},userInfo){

            const username=userInfo.username.trim();

            let params={

                "email":username,

                "password":userInfo.password

            }

            return new Promise((resolve,reject)=>{

                loginByUsername(params).then(res=>{

                    console.log(res);

                    const data=res.data;

                    commit('SET_TOKEN',data.token);

                    setToken(data.token);

                    resolve(data);

                }).catch(error=>{

                    reject(error);

                })

            })

        }

      }

      //Login组件中登录

      self.$store.dispatch('LoginByUser',this.loginForm).then((res)=>{

         self.$router.push({path:self.redirect||'/'});

      }).catch(()=>{

          Message({message:'用户名或密码错误,请检查!',type:'error',duration:3*1000})

     })



推荐阅读
  • 本文介绍了如何使用vue-awesome-swiper组件,包括在main.js中引入和使用swiper和swiperSlide组件,以及设置options和ref属性。同时还介绍了如何在模板中使用swiper和swiperSlide组件,并展示了如何通过循环渲染swipes数组中的数据,并使用picUrl属性显示图片。最后还介绍了如何添加分页器。 ... [详细]
  • vue使用
    关键词: ... [详细]
  • 本文讨论了为什么在main.js中写import不会全局生效的问题,并提供了解决方案。在每一个vue文件中都需要写import语句才能使其生效,而在main.js中写import语句则不会全局生效。本文还介绍了使用Swal和sweetalert2库的示例。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • iOS Swift中如何实现自动登录?
    本文介绍了在iOS Swift中如何实现自动登录的方法,包括使用故事板、SWRevealViewController等技术,以及解决用户注销后重新登录自动跳转到主页的问题。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • Vue3中setup函数的参数props和context配置详解
    本文详细介绍了Vue3中setup函数的参数props和context的配置方法,包括props的接收和配置声明,以及未通过props进行接收配置时的输出值。同时还介绍了父组件传递给子组件的值和模板的相关内容。阅读本文后,读者将对Vue3中setup函数的参数props和context的配置有更深入的理解。 ... [详细]
  • Metasploit攻击渗透实践
    本文介绍了Metasploit攻击渗透实践的内容和要求,包括主动攻击、针对浏览器和客户端的攻击,以及成功应用辅助模块的实践过程。其中涉及使用Hydra在不知道密码的情况下攻击metsploit2靶机获取密码,以及攻击浏览器中的tomcat服务的具体步骤。同时还讲解了爆破密码的方法和设置攻击目标主机的相关参数。 ... [详细]
  • 本文介绍了如何在给定的有序字符序列中插入新字符,并保持序列的有序性。通过示例代码演示了插入过程,以及插入后的字符序列。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文介绍了如何使用elementui分页组件进行分页功能的改写,只需一行代码即可调用。通过封装分页组件,避免在每个页面都写跳转请求的重复代码。详细的代码示例和使用方法在正文中给出。 ... [详细]
  • node.jsrequire和ES6导入导出的区别原 ... [详细]
author-avatar
mmmm的海角_771
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有