vue 页面鉴权 路由守卫beforeEach

// 鉴权页面路由
{
    path:"/userinfo",
    name:"userinfo",
    component:()=>import('@/views/Auth'),
    meta:{auth:true}
},

import store from '../store'
// 进入路由之前触发
// to 要进入的路由
// from 从那个路由过来的
router.beforeEach(function(to, from, next){
	 if(to.meta.auth){ //鉴权页面标记
	 	// 进入userinfo 要判断是否登录
	 	if(store.state.user.isLoading){ // 在登录中
	 		// 携带参数path  如果有多个页面都需要登录验证
	 		 next({name:"Auth",query:{path:to.name}})  //跳转到鉴权页面
	 	}else if(store.state.user.islogin){ // 登录成功
	 		next() // 正常跳转
		}else{ // 没有登录 
			 next({name:"login"}) //跳转到登录页面
		}
	 	return 
	 }
     next()
})

鉴权页面

<template>
    <Center>
        <!-- auth 鉴权 -->
        验证中
    </Center>
</template>

<script>
import Center from '@/components/Center'
import {mapState} from 'vuex'
export default {
    components:{
        Center
    },
    computed:mapState('user',['data','isLogin','isLoading']),
    watch:{
        isLogin:{ // 监听登录状态变化
            immediate:true,
            handler(){
                this.handleLogin()
            }
        },
        isLoading:{
            immediate:true,
            handler(){
                this.handleLogin()
            }
        }
    },
    methods:{
        handleLogin(){
            if(this.isLoading) return // 是否在登录中
            if(this.isLogin){ // 是否在登录成功
              
                if(this.$route.query.path){
                	// 跳转this.$route.query.path 路径
                	this.$router.push({name:this.$route.query.path})
                }else{
                	// 没有指定页面路由 就跳转个人中心  
                	this.$router.push({name:'userinfo'})
                }
            }else{
                // 跳转登录页
                this.$router.push({name:'login'})
            }
        }
    }
}
</script>