vue能控制未登陆的请求不能访问url_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})

})