有时候急着学更多新知识会把最基础的遗忘,以前使用PHP那会还知道表单序列化,最近通过form获取里面所有name属性对应的控件值却把document.getElementById('表单Id').serializeArray()给遗忘了,通过遍历name属性去获取表单控件值-----勿忘初心
需求:之前项目大都是后台进行最后的登录接入,现在用了vue需要前端自己通过实现登录页面,以博客登录为例,登录前界面如下:
进入首页头部如下
点击登陆进入后台给的链接登录页(注意这里是后台给了登陆页面不是前端自己制作)
登录后获取用户名进行显示
主要知识:vue-Router + vuex+接口获取
(1)使用vuex在store仓库中存储一个表示login的state变量,userInfo变量标志用户信息,使用vuecli的一般是在store.js中声明
const state = {
userInfo:{"username":''},//其他用户属性可在这里初始化
login: false//默认还没登录
}
(2)header.vue文件html代码段
第一次进入页面加载header的时候先进行一次判断,判断用户是否已经登录,如果已经登录则将头部用户信息展示,否则直接显示登录按钮
如何判断用户是否已经登录?由于登录页面并不是前端自己制作,因此就需要后台给个接口告诉前端用户是否已经登录,前端进行判断,因此这个接口就是后台所给的可以判断用户是不是已经登录的接口,并且接口最好是返回一个status状态值,如果已经登录并将用户信息返回~(header作为公共头部是一进来就加载,因此此处接口调用了一次);退出登录只需将login值设置为false即可直接退出登录,监听用户是否登录此处使用计算属性返回login变量进行监听
<template>
<div>
<div v-show="isLogin">
{{userInfo.username}}
<div @click="loginout" style="cursor:pointer;">退出登录</div>
</div>
<div @click="login" style="cursor:pointer;" v-show="!isLogin">登录</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
computed: {
isLogin(){
return this.$store.getters.getLogin
},
loginout(){
this.$store.state.login = false;window.location.href="登录链接";
}
},
methods:{
login(){
window.location.href="登录链接";
}
},
mounted(){
this.fetch({
url:'后台给的判断用户是否已经登录接口',
method:'post'
}).then(res=>{
if(res.status==200){
this.$store.state.login = true;//如果已经登录将变量login设置为true
this.$store.state.userInfo= res.data;//将后台登录后用户信息给userInfo
}
})
}
}
</script>
(2)处理完刚进入页面的情况,接着便是每一个路由进入要如何处理,由于'/home’路由为进入页面,无论登录还是没登录都可以显示,因此对'/home'路由不进行处理,其他路由遍历统一控制,使用vue-router,beforEach钩子函数,在遍历之前先用vuex写一个mutations函数对路由进行处理,思路是,对每个路由请求后台所给的判断用户是否已经登录的接口,如果已经登录,则跳转到当前路由,如果未登录,则跳转到登录页面链接进行登录,mutations如下:(store.js)
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';
const mutations = {
updateUserinfo(state, to) {
axios.post('判断用户是否已经登录接口').then((res) => {
if(res.data.status==200){
//已经登录,login设置为true,跳转到当前路由
state.userInfo = res.data.data;
state.login = true;
router.push(to);
}else{
//未登录,跳转到登录页面
toast['error']({
msg: res.data.statustext,
timeout: 3000
});
window.location.href = "后台所给登录页面链接";
}
}).catch((err) => {
console.log("err",err);
toast['error']({
msg: '获取用户信息失败!',
timeout: 3000
});
window.location.href = "后台所给登录页面链接";
})
}
}
(3)最后一步,路由遍历(index.js)
router.beforeEach((to, from, next) => { //切换网页标题
//to要跳转过去的路由,from当前要离开的路由,next进行页面跳转必须调用,否则不会跳转到下一个路由
if(!store.state.login&&to.path!='/home'){
//还没登录并且当前页面不是首页(首页已经在第一步进行了处理)
store.commit('updateUserinfo',to);//调用mutation路由处理函数
}else{
//已经登录了,如果路由匹配不上,跳转到404错误组件页面(该组件自己编写^_^)
if(to.matched.length===0){
next({path:'/404'});//转至404
}else{
//正确路由,next()进入到要跳转路由
document.title = '';//设置进入页面title
next();
}
}
});
总结:
一个接口:后台给出如getUserInfo接口,该接口返回用户是否已经登录,基本接口返回如下res{status:200,data:{username:'xxxx','images':'xxx'}}
Vue-Router:router.beforeEach()钩子函数
Vuex:存储判断用户登录信息{login:false,userInfo:{username:''}}
(最后,发现该方法存留一个不容易发现的bug,当刷新当前页面点击浏览器的回到上一步(即返回键)时,会跳转不过去。。。这是为什么呢。。。)