路由导航守卫

vue -router 提供的导航守卫主要是用来通过跳转或取消的方式守卫导航。

1.全局的前置守卫beforeEach是在导航出发时会被回调的：

   （1）拿到router对象

   （2）在登录页面绑定一个事件，如果客户登录成功了，就立即把登录信息缓存起来

   （3）在导航守卫判断用户是否登录进行拦截

    （4）else可写 ，可不写，默认该往哪跳就往哪跳

   

    <div>
     <button @click="loginClick">登录</button>
    </div>
</template>
<script>
import {useRouter} from "vue-router"
    export default {
        setup(){
          const loginClick=()=>{
            //缓存登录信息
            window.localStorage.setItem("token","jiang")
            router.push({path:"/home"})
          }
          return{
            loginClick
          }
        }
    }

// 导航守卫
// to:Route对象，即将跳转到的路由对象
//from：Route对象: 从哪一个路由对象导航过来的
/*
返回值问题:
     1.false  不进行导航
     2.undefined 或者不写返回值 ：进行默认导航
     3.返回串：路径 返回到对应的路径中
     4.对象:router.push({path:"",query:{}})

**/
router.beforeEach((to,from)=>{
    console.log("进行一次的路由跳转")
//   if(to.path.indexOf("/home")!==-1){
//       return '/login'
//   }
// 如果用户不是进的登录页，就给它跳到登录页
if(to.path !=="/login"){
    // 取到token值
    const token=window.localStorage.getItem("token")
    // 如果没有token就给返回到登录页面
  if(!token){
    return "/login"
  }
}
    
})