1.作用:防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。
2.实现代码
2.1在router/index.js中添加如下代码,
const router = new VueRouter({
routes
})
// 挂载路由导航守卫,作用是防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。
router.beforeEach((to, from, next) => {
// to将要访问的路径
// from代表从哪个路径跳转而来
// next 是一个函数,表示放行。
// next() 直接放行 next('/login')强制跳转到登录页面
if (to.path === '/login') return next()
// 获取token
const token = window.sessionStorage.getItem('token')
// 判断token是否存在,若存在,直接放行;若不存在,强制跳转到登录页面
if (!token) return next('/login')
next()
})