路由守卫登录例子

た入场券 2024-04-19 12:26 90阅读 0赞

//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")
          }
    
      ]
    })