一、场景
前后端分离spa页面权限设置
二、技术栈
vue全家桶
三、实现效果
登录页面
四、实现原理
vueRouter控制前端页面跳转路由，当登录成功后，返回用户登录token信息，将token信息放到store中，router路由跳转取store中状态有token时，当取到token时跳转到首页，反之跳转到登录页
登录校验
路由配置
vueRouter.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
// 判断该路由是否需要登录权限
console.log(store)
if (store.state.root.token) { // 通过vuex state获取当前的token是否存在
next()
} else {
alert('请登录')
next({
path: '/' //登录路由
})
}
} else {
next()
}
})
五、全局守卫-官方文档
全局守卫
