1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录
下面的两个页面,登录页不需要检测,首页需要检测
const routers = [{path: '/',component: App,children: [{ path: '/login', component: Login,meta: {title: '登录'
}},{ path: '/home', component: Home,meta: {title: '首页',requireAuth: true}}]}]export default routers
2.main.js
返回遍历的某个路由对象,我们定义为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测meta对象是不是有requireAuth这个属性且为true
检测到需要登录权限后,我的做法是请求接口判断用户是否登录
如果未登录,跳转到登录页面;如果已经登录,确保要调用next()方法,否则钩子就不会被resolved
router.beforeEach((to, from, next) => {/* 页面title */if (to.meta.title) {document.title = to.meta.title}/* 判断该路由是否需要登录权限 */if (to.matched.some(record => record.meta.requireAuth)) {//是否登录axios.post('/home/user/isLogin').then(function (response) {if (response.data.code == 0) {//未登录if (response.data.data.online == 0) {next({path: '/login',})} else {//已登录next()}}}).catch(function (error) {// Toast(error.data.msg); });}next();})