H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

目前只有登录页面不需要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

//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})
     })

回答:

断点看一下?

回答:

没太看懂,不过你加一条路由试试

{ path: '', redirect: '/login' },

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

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址