热门标签 | 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})

     })



推荐阅读
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社区 版权所有