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(); })