Vue开发实践-基于vueRouter的token的强页面跳转控制

基于vueRouter的token控制 ，可以有效强控制页面跳转到目标页面时必须是 持有有效token 否则 无法访问目标页面

 

//1 组件定义 

//填写订单-点餐

const FillFoodOrder = () =>import('food/fillOrder');

//路由配置

export const routes = [

{

meta: {

name: "填写订单-点餐",

needLogin:true    // needLogin true：该页面需要登录后 有token才能访问 

},

path: '/FillFoodOrder',

name: 'FillFoodOrder',

component: FillFoodOrder

}

]

//3 路由拦截
router.beforeEach((to, from, next) => {

store.commit('loadingEnd');

console.warn(`【 ${from.meta.name} 】:来源路由地址${from.fullPath}`)

console.warn(`【 ${to.meta.name} 】:当前路由地址${to.fullPath}`)

console.warn(`【 router query 】: ${JSON.stringify(to.query)}

【router params 】:${JSON.stringify(to.params)}`)

//保障每次访问是重新获取token 避免用户使用一个老旧的 失效的token 造成用户访问到页面的时候才触发token失效，降低了用户使用体验

if(!from.fullPath||from.fullPath=='/'){ //第一次进入页面 清空先前token  （页面刷新了 也会造成这种场景）

console.log("清空token",from);

localStorage.token="";

}

if(!!to.meta.needLogin){ //需要登录

if(!!localStorage.token){ //已登录 并且token 传过来了

next()

}else{ // 第一次进页面 App.$Login 无法调用  所以该登录方法 不能定义在 main.js 中

//App.$Login((res)=>{

$Login((res)=>{

next()

});

}

}else{ //不需要登录

next()

}

})

用户使用浏览器浏览页面（url）--》浏览器--》路由拦截--》App.vue(第一次加载或者页面刷新才会有此步)--》目标页面

转载于:https://my.oschina.net/mirclewang/blog/3031709