VUE导航守卫

        为了阻止非法用户对受限资源的访问，Web服务器通过过滤器和拦截器，进行客户端请求的拦截。在身份验证通过后，才能继续访问目标资源，否则跳转登录或错误页面。

        但是，这种方式只能限制非法用户对服务器资源的访问。在前后端项目开发中，要让客户端受限资源得到合法的访问，可以用VUE中，提供的导航守卫，每一个路由组件进行切换，或页面访问时进行调用。身份验证通过后，再导航到目标组件，类似于Web服务器的过滤器和拦截器。

Vue导航守卫分为三种：

1. 全局前置守卫：在路由跳转前被调用，适合做一些全局的前置处理，如用户身份验证等。

2. 路由独享的守卫：在路由配置中单独定义的守卫，只对该路由生效，适合做一些路由级别的处理。

3. 组件内的守卫：在组件内部定义的守卫，可以通过beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等钩子函数对组件进行控制。 在实际开发中，可以根据需求灵活运用这些导航守卫，来实现更加丰富的功能和交互体验。

使用全局前置守卫的步骤：

在路由配置文件中定义需要使用导航守卫的路由

        取出登录对象信息，指定需要拦截的目标组件，如果登录对象为空，或者权限不是vip，跳转路由到登录页面（同时可以传递参数过去）

import {createRouter,createWebHistory} from 'vue-router'
import  routes  from "./routes"

const router = createRouter({
    history:createWebHistory(),
    routes
});
//定义路由器前置守卫
router.beforeEach((to,  from , next) => {
        //从sessionStorage中得到登录信息
        var str = sessionStorage.getItem("loginUser");
        let loginUserObj = JSON.parse(str);
        //路由名
        if((to.name == "Music" || to.name=="Art")
&&(loginUserObj ==null || loginUserObj.grade!="VIP") ){
            //跳转路由，并传递参数
            router.push({name:'Login',query:{"noGrade":"你没有权限!"}})
        }      
        else{
            next();
        }
    }
)

export default router ;

• to:路由器到的目标组件  
• from:来自哪个组件的切换  
• next:是否允许访问下一个组件代码

跳转路由也可以用

 location.href="/Login?noGrade=你没有权限！";

前端得到请求参数的值，做出相应显示

<script>
import axios  from "axios";
export default {
  data() {
    return {
      errorInfo:"",
      loginObj:{}
    }
  },
  methods:{
    login(){
      axios.get("/project/user/login",{params:this.loginObj}).then(resp=>{
        let userObj = resp.data;
        if(userObj==''){
          this.errorInfo="密码或用户名不正确";
        }else {
          //在sessionStorage中设置登录用户共享数据
          sessionStorage.setItem("loginUser",JSON.stringify(userObj));
          if(userObj.grade=="普通用户"){
            this.$router.push("/Index")
          }
          else if(userObj.grade=="VIP"){
            this.$router.push("/Resources")
          }
        }
      })
    }
  },created() {
    //得到请求参数noGrade的值
    this.errorInfo=this.$route.query.noGrade;
  }
}
</script>