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

mockjs

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

安装mockjs

npm install mockjs
1

配置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
1

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

逻辑如下

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

import {getToken} from '../token'
1

在请求拦截中，添加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();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在login.vue中导入方法

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

在/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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果展示