// 配置路由守卫
router.beforeEach(async (to, from, next) => {
// 用来测试放行
// next();
// console.log(to, from, next);
// console.log(store);
let token = store.state.user.token;
let name = store.state.user.userInfo.name;
// console.log(name);
// console.log(token);
// 用户已经登入了
if (token) {
// 用户已经登录了但是点击的是登入和注册组件
if (to.path == "/mylogin" || to.path == "/myregister") {
// 让它跳转到首页
next("/myhome");
} else {
// 用户点击的是其他页面搜索,购物车等 判断是否有name属性如果有就放行
if (name) {
next() //放行
} else {
try {
// 用户点击的是其他页面搜索购物车等 没有name属性 调用仓库获取信息接口获取name,token属性
await store.dispatch("getUserInfo");
next(); //再进行放行
} catch (error) {
// 用户点击的是其他页面搜索购物车 但是token失效了 调用仓库的删除用户信息接口
await store.dispatch('UserLogout')
// 让用户重新登录
next('/mylogin')
}
}
}
} else {
// 用户没有登录,不能去交易相关组件trade,以及支付相关pay paysuccess
let toPath = to.path //获取到用户去的是哪理
// 没有登入去的是这些组件,得让它去登录组件 判断如果有字符串理有pay
if(toPath == '/trade' || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center') != -1){
// 把未登录的时候想去而没有去成的路由组件,存储路由信息于地址栏中query
next('/mylogin?redirect='+toPath)
}else {
// 没有登入去的是home 搜索 购物车 可以进行放行
next()
}
}
});
vue路由守卫
最新推荐文章于 2024-09-12 21:11:58 发布