后台管理系统-------登录功能实现(element-ui)
登录页面代码(login):
<template>
<div class="login">
<el-form
:model="userinfo"
:rules="loginRules"
label-position="right"
class="el_box"
label-width="60px"
>
<el-form-item label="账号:" class="el_username" prop="username">
<el-input v-model="userinfo.username"></el-input>
</el-form-item>
<el-form-item label="密码:" class="el_password" prop="username">
<el-input type="password" v-model="userinfo.password"></el-input>
</el-form-item>
<el-button type="primary" class="el_login" @click.prevent="login">登录</el-button>
</el-form>
</div>
</template>
<script>
//引入封装好的api登录接口
import { login } from "../http/api";
export default {
name: "login",
data() {
return {
userinfo: {
username: "",
password: ""
},
loginRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
]
}
};
},
methods: {
// 登录
async login() {
const res = await login(this.userinfo);
// console.log(res);
// 结构赋值
const {
meta: { msg, status }
} = res.data;
// 判断code值
if (status === 200) {
// 结构赋值token
const { token } = res.data.data;
// 本地存储token
localStorage.setItem("token", token);
//赋值redirect表示的是被路由拦截拦下来的页面
const { redirect } = this.$route.query;
//如果直接登录,没有redirect,成功后直接跳转到home
if (!redirect) {
this.$router.push({ name: "Home" });
} else {
this.$router.push({ path: redirect });
}
// 成功提示
this.$message({
message: msg,
type: "success"
});
} else {
// 失败提示
this.$message({
message: msg,
type: "error"
});
}
}
}
};
</script>
<style lang="scss" scoped>
.login {
width: 100%;
height: 836px;
background: #2a4c6b;
.el_box {
background: white;
position: absolute;
top: 30%;
left: 40%;
text-align: center;
width: 400px;
height: 300px;
border-radius: 5px;
margin: 0 auto;
.el_username {
margin-top: 70px;
width: 80%;
margin-left: 25px;
}
.el_password {
margin-top: 20px;
width: 80%;
margin-left: 25px;
}
.el_login {
width: 30%;
margin-top: 20px;
}
}
}
</style>
api接口封装:(两个文件 request.js和api.js文件)
request.js: 设置axios拦截
import axios from "axios"
const service = axios.create({
baseURL: "https://www.liulongbin.top:8888/api/private/v1",
timeout: 3000
})
// 请求拦截
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error)
});
export default service;
api.js: 项目中的业务接口
import request from "./request"
// 登录接口
export function login(data){
console.log(data)
return request({
url:"/login",
method:"POST",
data
})
}
在main.js里面设置全局路由守卫:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import axios from "axios";
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false;
Vue.prototype.axios = axios;
// 全局路由守卫
router.beforeEach((to, from, next) => {
// console.log("from:", from);
// console.log("to:", to);
if (to.meta.auth) {
// 本地获取token
const token = localStorage.getItem('token')
// 判断token是否存在
if (!token) {
next({
name: 'Login',
// 返回上次跳转的路由
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next();
}
});
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
router 路由配置:
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Login",
component: Login
},
{
path: "/home",
name: "Home",
meta:{
auth:true
},
component: Home
}
];
const router = new VueRouter({
routes
});
export default router;
登录的基本逻辑操作就是这样了