password: this.account.password
}
// 调用axios登录接口
requseLogin(loginParams).then(res => {
// debugger;
this.logining = false;
// 根据返回的code判断是否成功
let { code, msg, user } = res.data;
if (code === 200) {
// elementui中提示组件
this.$message({
type: 'success',
message: msg
});
// 登陆成功，用户信息就保存在sessionStorage中
sessionStorage.setItem('user', JSON.stringify(user));
// 跳转到后台主页面
console.log('this',this)
this.$router.push({ path: '/home' })
}else {
this.$message({
type: 'error',
message: msg,
});
}
}).catch(err =>{
console.log(err);
});
}else {
console.log('error submit!');
return false;
}
})
},
reset () {
this.$refs.AccountForm.resetFields()
},
}
}
</script>
当点击登录按钮后，跳转到‘/home’页面，在components文件夹下面新增home.vue文件
<template>
<div >
<h1>{{ msg }}</h1> </div>
</template>
<script>
export default {
name: '后台主界面',
data () {
return {
msg: '后台主界面'
}
}
}
</script>
接下了修改router中的index.js
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Home from '../components/home';// 懒加载方式，当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/components/Login'], resolve)
const Home = resolve => require(['@/components/home'], resolve)
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home
}
]})
// 访问之前，检查是否登陆了
router.beforeEach((to, from, next) => {
if(to.path.startsWith('/login')) {
window.sessionStorage.removeItem('user');
next()
}else {
let token = window.sessionStorage.getItem('user');
if (!token) {
next({path: '/login'})
}else {
next()
}
}
});
export default router
在main.js中引入mock
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
