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