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

最新推荐文章于 2024-05-21 11:29:05 发布

weixin_48160914

最新推荐文章于 2024-05-21 11:29:05 发布

阅读量629

点赞数 6

文章标签：学习 vue.js

本文链接：https://blog.csdn.net/weixin_48160914/article/details/138225124

版权

本文介绍了如何在前端项目中安装和配置MockJS来模拟后端数据，同时优化了登录逻辑，包括存储token在cookies中、获取用户信息并存储在sessionStorage中，以便于后续请求。还展示了如何在Vite项目中取消跨域代理和处理cookies与sessionStorage的管理。

摘要由CSDN通过智能技术生成

mockjs

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

安装mockjs

npm install mockjs

配置mockjs

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

结构目录

在这里插入图片描述

登录逻辑优化

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

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

1. 存储token

cookies

安装js-cookie，这是处理cookies

npm install js-cookie

编写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)
}

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

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

逻辑如下
在这里插入图片描述

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

import {getToken} from '../token'

在请求拦截中，添加token
在这里插入图片描述

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

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

先创建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>