Vue后台管理系统练习-9 登陆界面及权限检测

目标：在进入页面前先进行用户的权限检测，如果没有权限则跳转登陆界面

后台模拟接口

登陆校验的模拟后台接口如下，比较简单，大部分地方都写好了注释

const userProfile = [
  {
    userid: "YYYYY",
    passw: "123456",
    userType: 1,
    username: "admin",
    // 因为是模拟接口所以刷新了之后数据就没了，达不到获取上一次的时间，在这里写死了
    lastTime: "2022-6-26",
    curTime: "2022-6-26",
    place: '上海',
  }
]

export default {
  checkLogin(config) {
    const { userid, passw } = JSON.parse(config.body);
    let isUser = 0;
    let userData = {};
    for (let i = 0; i < userProfile.length; i++) {
      let user = userProfile[i];
      if (user.userid == userid) {
        isUser = 1;
        if (user.passw == passw) {
          isUser = 2;
          // 更新登陆数据
          user.lastTime = user.curTime;
          user.curTime = Date.now();

          // 存入用户数据
          userData = {
            username: user.username,
            userType: user.userType == 0?'普通用户' : '管理员用户',
            lastTime: user.lastTime,
            place: user.place,
          }
        }
        break;
      }
    }

    if (isUser == 0) {
      return {
        code: 500,
        msg: "用户不存在"
      }
    } else if (isUser == 1) {
      return {
        code: 500,
        msg: "密码错误"
      }
    } else if (isUser == 2) {
      return {
        code: 200,
        data: userData,
        msg: "登录成功！"
      }
    }
  }
}

登陆界面的编写

这里使用了之前封装好的commonForm组件，直接传入了数据进行组件调用：

<common-form
	v-bind:formLabel="formLabel"
	v-bind:form="form"
	v-bind:formType="formType"
	v-on:submitData="submitData"
	class="logForm"
>
</common-form>

<script>
import CommonForm from "@/components/common/CommonForm.vue";

export default {
	components: {
		CommonForm,
	},
	data() {
		return {
		formLabel: [
			{
				type: "input",
				model: "userid",
				label: "账号",
				inputType: "text",
			},
			{
				type: "input",
				model: "passw",
				label: "密码",
				inputType: "password",
			},
		],
		form: {
			userid: "",
			passw: "",
		},
		formType: "login",
		showAlter: false,
		alterTitle: "",
	};
},
</script>

提交后，commonForm组件返回用户输入的数据，进行post请求：

methods: {
	submitData(value) {
		this.$http.post("/login", value).then((res) => {
			const { code, msg, data } = res.data;
			if (code === 200) {
				this.$store.commit("userProfile", data);
				this.$router.push("/home");
			} else if (code === 500) {
			// 这里用了elementUI的alter组件，也可以用其他的替代
				this.alterTitle = msg;
				this.showAlter = true;
			}
		});
	},
},

设置全局守卫

在main.js中配置全局守卫，跳转页面前先校验权限：

router.beforeEach((to, from, next) => {
	if (to.meta.requireAuth) {
		if (store.state.userProfile === {}) {
			next()
		} else {
			next({ path: '/login' })
		}
	} else {
		next()
	}
})

至此就完成了登陆界面