路由守卫-vue切换路由登录判断、条件判断

清疚 2022-05-17 07:53 309阅读 0赞

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各种请求已经发出。

**一、如需要登录的路由可在main.js中统一处理（全局前置守卫）**

我们可以在入口文件man.js里面进行配置，使用router.beforeEach方法，不懂得可以打印to，from的参数就ok，requireAuth可以随意换名的，只要man.js里面跟配置路由的routes里面的字段保持一致：

import router from './router'
    router.beforeEach((to, from, next) => {
      if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
        if(!sessionStorage.getItem('token') && !localStorage.getItem('token')){
          next({
            path: '/login',
            query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
          })
        }else{
        	 next();
        }
      }else {
        next();
      }
    });
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

export default new Router({
    	routes: [
    		{
    			path: '/',
    			name: 'home',
    			redirect: '/home'
    		},
    		{
    			path: '/home',
    			component: Home,
    			meta: {
    		      title: '',
    		      requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
    		   }
    		},
    		{
    			path:'/login',
    			name:'login',
    			component:Login
    		},
    		{
    			path:'/register',
    			name:'register',
    			component:Register
    		}
    	]
    })

如果你还有登录以外的路由拦截判断的话，全局的守卫还不能满足你，官方还提供了以下几种路由的守卫。

**二、全局后置守卫**

router.afterEach((to, from) => {
      // ...
    })

**三、单独路由独享守卫（与全局一致，可单独对某个路由进行配置）**

const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]
    })

**四、组件内部路由守卫（可写在与生命周期同级位置）**

beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }