vue-router判斷頁面未登錄時,自動跳轉到登錄頁


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM