路由守卫 登录例子

//main的js文件下面的页面
	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'
	import store from './store'
	import axios from 'axios'
	import ElementUi from 'element-ui'
	import Router from "vue-router";

//关键的核心是这个路由守卫的 拦截

	router.beforeEach((to,from,next)=>{
	    console.log(to);
	    console.log(from);
	    if(to.name==="login"){
	        next()
	    }else{
	        //需要验证是否登录成功
	        if(sessionStorage.getItem("userLogin")){
	          next()
	        }else{
	          next({
	              path:"/login"
	          })
	        }
	    }
	})
	Vue.config.productionTip = false
	Vue.prototype.$axios= axios
	Vue.use(ElementUi)
	new Vue({
	  router,
	  store,
	  render: h => h(App)
	}).$mount('#app')


//login 登录页面
<template>
    <div>
        账号: <input type="text" v-model="username" placeholder="账号">
        密码: <input type="password" v-model="password" placeholer="密码">
        <button @click="handLogin">登录  </button>
        
    </div>
    
</template>

<script>
    export default {
        name: "login",
        data(){
            return {
                password:'',
                username:'',
                user:[{
                    username:"admin",
                    password:"123"
                }]
            }
        },
        methods:{
            handLogin(){
                if(this.username!==""&&this.password!==""){
                    this.userLogin({
                       username:this.username,
                        password:this.password
                    }).then(resp=>{
                        console.log(resp);
                        if(resp.code==200){
                            //登录成功
                            //在这里吧App组件的状态 改为true\
                            // this.$emit("changeLogin")
                            //第二种登录方式
                            console.log(this.$route);
                            sessionStorage.setItem("userLogin",JSON.stringify(resp.result))
                            this.$router.push("/home")
                        }else{
                            //登录失败
                            alert(resp.message)
                        }
                    })
                }else{
                    alert("请填写账号密码")
                }
            },
            userLogin(target){
                return new Promise((resole,reject)=>{
                    //这个item 就是 谁登录了
                    //find   寻找目标元素  找到返回 该元素
                  const item=this.user.find(item=>{
                      return item.username=target.username
                  })
                    if(item&&target.password===item.password){
                        resole({
                            code:200,
                            result:item
                        })
                    }else{
                        resole({
                            code:400,
                            message:"密码错误"
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

.//路由拦截页面
import Vue from 'vue'
import Router from 'vue-router'
import home from "./views/home"
import login from "./views/login"
Vue.use(Router)
export default new Router({
  routes: [
      {
          path:"/",
          name:"login",
          component:login
      },
      {
          path:"/home",
          name:"home",
          component:()=>import("./views/home.vue")
      }

  ]
})