使用vue全局路由守卫时发生重定向问题
描述:判读每个路由的元信息 requireAuth,如果为true并且当前的user的user不为admin,就不展示这个页面的内容并且使用next({path:'/'})给它跳转到”/“页面,他是可以跳转的,但是会抛出:
element-ui.common.js?d4c2:3373 Error: Redirected when going from "/ind
这个报错 setting页面就是受管控的页面,index是跳转前的页面,起初我以为是redirect: to => {return '/index' }的问题,但是跳转login页面也会抛出这个错误.目前时使用 location.reload()来刷新页面规避报错,
希望得到解答
//路由
<script>
const routes = [
{
path: '/login',
name: 'Login',
component: login,
// component:() => import('../views/login.vue')
},
{
path: '/',
name: 'home',
redirect: to => {
return '/index'
},
components: {
default: () => import('../views/HomeView.vue'),
TopSidebar: Header, //命名视图
LeftSidebar: Silder
},
children: [
{
path: '/one',
name: 'one',
alias: "/index",//别名,原来的名字还能使用
component: () => import('../views/one.vue'),
}, {
path: '/two',
name: 'two',
component: () => import('../views/two.vue'),
beforeEnter: (to, from, next) => { // 路由独享守卫 你也可以通过使用路径 meta 字段和全局导航守卫来实现类似的行为
let falg = window.confirm('是否要进入当前页面')
if (falg) {
next()
} else {
return
}
}
}, {
path: 'three',
name: 'three',
component: () => import('../views/three.vue'),
children: [
{
path: "one/:id",
name: "threeOne",
component: () => import('../threeChildern/one.vue'),
props: true
},
{
path: "two",
name: "threeTwo",
component: () => import('../threeChildern/two.vue')
}
]
}, {
path: 'four',
name: 'four',
component: () => import('../views/four.vue')
}, {
path: 'five',
name: 'five',
component: () => import('../views/five.vue')
}, {
path: 'setting',
name: 'setting',
meta: { //路由元信息,主要用于对一些网页做出限制
requireAuth: true
},
component: () => import('../views/settinig.vue')
}]
},
];
router.beforeEach((to, form, next) => {
// to 到达的路由地址 ,form来时候的路由地址
// 1.在地址栏中直接输入登录的地址
// 2.退出登录
// 3.找不到用户信息
if (to.path.startsWith('/login')) { //startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或 false。
window.sessionStorage.removeItem('access-user')
next()
} else {
let user = JSON.parse(window.sessionStorage.getItem('access-user'))
if (!user) {
next({ path: '/login' })
} else {
// 登录成功
if (to.matched.some(item => item.meta.requireAuth)) {
if (user.user == 'admin') {
next()
} else {
alert('您没有相关权限')
//如果这样跳转,就会触发报警,说重定向,但是是可以跳到指定页面的,直接next()也不会报错
// next({name:'/'})
location.reload(); //刷新网页
}
} else {
next()
}
}
}
})
script>