CLWY权限管理（五）--- 用户登录

Holyzq

已于 2022-07-21 09:29:00 修改

阅读量539

点赞数

分类专栏： vue.js ElementUI vuex 文章标签： vue.js 前端 javascript

于 2022-07-19 10:01:48 首次发布

本文链接：https://blog.csdn.net/huangdj321/article/details/125865935

版权

封装登录接口

import request from "@/utils/request";

// 登录
export function login(data) {
   
  return request({
   
    url: "/admin/auth/login",
    method: "post",
    data,
  });
}

新增登录路由

在 src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/layout/IndexView";

Vue.use(VueRouter);

const routes = [
  // 登录
  {
   
    path: "/sign_in",
    component: () => import("@/views/auth/SignIn"),
    meta: {
    title: "登录" },
  },
  {
   
    path: "/",
    component: Layout,
    children: [
      {
   
        path: "",
        component: () => import("@/views/HomeView"),
        meta: {
    title: "首页" },
      },
      {
   
        path: "/users",
        component: () => import("@/views/users/ListView"),
        meta: {
    title: "用户列表" },
      },
      {
   
        path: "/users/create",
        component: () => import("@/views/users/CreateView"),
        meta: {
    title: "新增用户" },
      },
      {
   
        path: "/users/edit/:id",
        component: () => import("@/views/users/EditView"),
        meta: {
    title: "编辑用户" },
      },
      {
   
        path: "/roles",
        component: () => import("@/views/roles/ListView"),
        meta: {
    title: "用户组列表" },
      },
      {
   
        path: "/roles/create",
        component: () => import("@/views/roles/CreateView"),
        meta: {
    title: "新增用户组" },
      },
      {
   
        path: "/roles/edit/:id",
        component: () => import("@/views/roles/EditView"),
        meta: {
    title: "编辑用户组" },
      },
      {
   
        path: "/permissions",
        component: () => import("@/views/permissions/ListView"),
        meta: {
    title: "菜单与权限列表" },
      },
    ],
  },
];

const router = new VueRouter({
   
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

创建登录组件及功能实现

新建 src/views/auth/SignIn.vue

<template>
  <div class="sign-in">
    <el-row>
      <el-col :span="12" :offset="6">
        <h1>长乐未央后台</h1>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="sort">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin('ruleForm')">
              立即登录
            </el-button>
            <el-button @click="resetForm('ruleForm')">重置