使用Vue搭建電商後臺管理系統的注意點<登入頁>

導航衛士

• 使用路由的導航衛士判斷使用者是否登入
  • 如果登入了，就放行
  • 如果沒有登入，就跳到登入頁

router.beforeEach((to,from,next) => {
    //to:  到哪去(路由物件)
    //from:  從哪來(路由物件)
    //next():放行的訊號，如果呼叫next方法，那麼元件就會展示出來，如果沒有呼叫這個方法，元件就不會展示在頁面中
    
    //這種情況是使用者要去登入頁，直接放行，顯示登入元件即可
    if(to.path === '/login') {
        return next();
    }
    //獲取伺服器返回的token，根據token。伺服器可以判斷使用者是否登入過
    const token = localStorage.getItem('token')
    //如果登入過，直接放行
    if(token){
        next()
    }else{
    //如果沒有，跳到登入頁,next的參數列示進入到哪個頁面
    next('/login')    
    }
})
複製程式碼