小白学习Vue3之管理系统模板搭建（四）——mockjs&登录逻辑优化

mockjs

mockjs是模拟后端发送给前端的数据

安装mockjs

npm install mockjs

配置mockjs

1. 在src下建立mock文件夹，在mock文件创建index.js文件
2. 在mock文件夹下建立api文件（该文件是创建的虚拟数据）
3. 在api文件夹下建立user.js文件
4. 在user.js文件里，写mock

6. 将user.js引入到mock中的index.js中

6. 将mock中的index.js引入到main.js中

7. 取消跨域代理
   在vite.config.js中，删除proxy

结构目录

登录逻辑优化

之前在提交登录表单之后，后台返回一个token（用户用户信息验证）

1. 我们token储存在cookeis中，在每次发送请求时，都携带token；
2. 然后去请求获取用户信息，后台返回用户基本信息（小白这里只有，名字、角色和菜单）

1. 存储token

cookies

1. 安装js-cookie，这是处理cookies

npm install js-cookie

2. 编写token工具类

在src/utils下建立token.js

源码如下

import Cookies from 'js-cookie'

const TokenKey = 'XXXX-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

3. 在/src/view/login.vue中，将token放到cookies中
   导入token工具类

import {setToken} from '../utils/token'

逻辑如下

4. 在每次发送请求时，携带token
   在/src/utils/http/axios.js中
   导入token工具类

import {getToken} from '../token'

在请求拦截中，添加token

2. 获取用户信息跳转到首页

1. 在/src/view/login.vue中，将token放到cookies之后，去请求用户信息
2. 将返回的用户信息放到sessionStorage中，
3. 跳转到首页

先创建info工具类，在/src/utils/下建立

源码如下

const name = ''
const roles = ['superAmin']
const permisssins = []


export function getName() {
    var data = JSON.parse(sessionStorage.getItem('name'));
    if(data && data == ''){
        return name
    }else {
        return data
    }
}
export function getRoles() {
    var data = JSON.parse(sessionStorage.getItem('roles'));
    if(data && data == ''){
        return roles
    }else {
        return data
    }
}
export function getPermissions() {
    var data = JSON.parse(sessionStorage.getItem('permisssins'));
    if(data && data == ''){
        return permisssins
    }else {
        return data
    }
}

export function setName(data) {
    sessionStorage.setItem('name', JSON.stringify(data));
}
export function setRoles(data) {
    sessionStorage.setItem('roles', JSON.stringify(data));
}
export function setPermissions(data) {
    sessionStorage.setItem('permisssins', JSON.stringify(data));
}

export function delAll() {
    sessionStorage.clear();
}

在login.vue中导入方法

import { setName,setPermissions,setRoles } from "../utils/info";

在/src/router/index.js中，添加首页路由；并在src下面创建layout/index.vue

修改router.beforeEach

layout/index.vue页面源码，后台首页采用element-plus的container布局

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>


</script>

效果展示