vue项目后台给登录页面如何接入？一个接口+Vue |
您所在的位置：网站首页 › vue-element-admin登录页面联调后端 › vue项目后台给登录页面如何接入？一个接口+Vue |
vue项目后台给登录页面如何接入？一个接口+Vue
|
有时候急着学更多新知识会把最基础的遗忘，以前使用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变量进行监听 {{userInfo.username}} 退出登录 登录 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 } }) } }（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，当刷新当前页面点击浏览器的回到上一步（即返回键）时，会跳转不过去。。。这是为什么呢。。。） |
【本文地址】
今日新闻 |
推荐新闻 |