SpringBoot系列-Security + La

SpringBoot系列-Security + Layui實現一套權限管理后臺模板

　前言

　　Spring Security官網：https://spring.io/projects/spring-security

　　Spring Security是一個功能強大且高度可定制的身份驗證和訪問控制框架，側重于為Java應用程序提供身份驗證和授權。Security通過大量的攔截器進行校驗，具體請看官網列出的列表：https://docs.spring.io/spring-security/site/docs/4.2.4.RELEASE/reference/htmlsingle/#ns-custom-filters

　　本文記錄在SpringBoot項目中整合Spring Security進行權限控制，配合Layui，實現一套相對簡單的權限管理后臺模板

　　效果演示

　　登錄，一個簡單的登錄頁面，沒登錄之前，訪問任意接口都會被攔截到登錄頁面（本例中，密碼沒有進行加密，存儲的是明文，大家自己再進行加密存儲跟校驗，我這樣就從簡了）

　　我們可以利用配置文件的分支選擇，設置開發環境不進行驗證碼校驗，測試、生產環境再開啟驗證碼校驗，這樣可以大大方便我們開發調試

　　xxx_huanzi，普通用戶權限登錄

　　xxx_sa、xxx_admin，管理員權限登錄

　　退出登錄

　　關鍵代碼

　　數據表

　　首先我們要確定下我們需要哪些表，結構跟測試數據我一起貼出來

　　系統用戶表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_user
-- ----------------------------
DROP TABLE IF EXISTS `sys_user`;
CREATE TABLE `sys_user`  (
  `user_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶id',
  `login_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '登錄名',
  `user_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶名稱',
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '登錄密碼',
  `valid` char(1) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '軟刪除標識，Y/N',
  `limited_ip` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '限制允許登錄的IP集合',
  `limited_mac` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更高級別的安全限制，限制允許登錄的mac地址集合',
  `expired_time` datetime NULL DEFAULT NULL COMMENT '賬號失效時間，超過時間將不能登錄系統',
  `last_change_pwd_time` datetime NOT NULL COMMENT '最近修改密碼時間，超出時間間隔，提示用戶修改密碼',
  `limit_multi_login` char(1) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '是否允許賬號同一個時刻多人在線，Y/N',
  `greate_time` datetime NOT NULL COMMENT '創建時間',
  `update_time` datetime NOT NULL COMMENT '修改時間',
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE=InnoDB CHARACTER SET=utf8 COLLATE=utf8_general_ci COMMENT='系統用戶表' ROW_FORMAT=Compact;

-- ----------------------------
-- Records of sys_user
-- ----------------------------
INSERT INTO `sys_user` VALUES ('1', 'xxx_sa', 'sa', '123456', 'Y', NULL, NULL, '2020-09-01 16:35:16', '2019-07-19 16:35:46', 'N', '2019-07-19 16:36:03', '2019-07-19 16:36:07');
INSERT INTO `sys_user` VALUES ('2', 'xxx_admin', 'admin', '123456', 'Y', NULL, NULL, '2020-09-01 16:35:16', '2019-07-19 16:35:46', 'N', '2019-07-19 16:36:03', '2019-07-19 16:36:07');
INSERT INTO `sys_user` VALUES ('3', 'xxx_huanzi', 'huanzi', '123456', 'Y', NULL, NULL, '2020-09-01 16:35:16', '2019-07-19 16:35:46', 'N', '2019-07-19 16:36:03', '2019-07-19 16:36:07');

SET FOREIGN_KEY_CHECKS=1;

　　系統權限表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_authority
-- ----------------------------
DROP TABLE IF EXISTS `sys_authority`;
CREATE TABLE `sys_authority`  (
  `authority_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '權限id',
  `authority_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '權限名稱，ROLE_開頭，全大寫',
  `authority_remark` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '權限描述',
  PRIMARY KEY (`authority_id`) USING BTREE
) ENGINE=InnoDB CHARACTER SET=utf8 COLLATE=utf8_general_ci COMMENT='系統權限表' ROW_FORMAT=Compact;

-- ----------------------------
-- Records of sys_authority
-- ----------------------------
INSERT INTO `sys_authority` VALUES ('1', 'ROLE_SA', '超級管理員權限');
INSERT INTO `sys_authority` VALUES ('2', 'ROLE_ADMIN', '管理員權限');
INSERT INTO `sys_authority` VALUES ('3', 'ROLE_USER', '普通用戶權限');

SET FOREIGN_KEY_CHECKS=1;

　　系統菜單表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_menu
-- ----------------------------
DROP TABLE IF EXISTS `sys_menu`;
CREATE TABLE `sys_menu`  (
  `menu_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '菜單id',
  `menu_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '菜單名稱',
  `menu_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '菜單路徑',
  `menu_parent_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '上級id',
  PRIMARY KEY (`menu_id`) USING BTREE
) ENGINE=InnoDB CHARACTER SET=utf8 COLLATE=utf8_general_ci COMMENT='系統菜單表' ROW_FORMAT=Compact;

-- ----------------------------
-- Records of sys_menu
-- ----------------------------
INSERT INTO `sys_menu` VALUES ('1', '系統管理', '/sys', NULL);
INSERT INTO `sys_menu` VALUES ('2', '用戶管理', '/sys/user', '1');
INSERT INTO `sys_menu` VALUES ('3', '權限管理', '/sys/authority', '1');
INSERT INTO `sys_menu` VALUES ('4', '菜單管理', '/sys/menu', '1');
INSERT INTO `sys_menu` VALUES ('5', 'XXX菜單', '/menu/xxx', '');
INSERT INTO `sys_menu` VALUES ('6', 'XXX菜單1', '/menu/xxx1', '5');
INSERT INTO `sys_menu` VALUES ('7', 'XXX菜單2', '/menu/xxx2', '5');

SET FOREIGN_KEY_CHECKS=1;

　　用戶與權限關聯表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_user_authority
-- ----------------------------
DROP TABLE IF EXISTS `sys_user_authority`;
CREATE TABLE `sys_user_authority`  (
  `user_authority_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶權限表id',
  `user_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶id',
  `authority_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '權限id',
  PRIMARY KEY (`user_authority_id`) USING BTREE
) ENGINE=InnoDB CHARACTER SET=utf8 COLLATE=utf8_general_ci COMMENT='用戶權限表' ROW_FORMAT=Compact;

-- ----------------------------
-- Records of sys_user_authority
-- ----------------------------
INSERT INTO `sys_user_authority` VALUES ('1', '1', '1');
INSERT INTO `sys_user_authority` VALUES ('2', '2', '2');
INSERT INTO `sys_user_authority` VALUES ('3', '3', '3');

SET FOREIGN_KEY_CHECKS=1;

　　用戶與菜單關聯表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_user_menu
-- ----------------------------
DROP TABLE IF EXISTS `sys_user_menu`;
CREATE TABLE `sys_user_menu`  (
  `user_menu_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶菜單表id',
  `user_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶id',
  `menu_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '菜單id',
  PRIMARY KEY (`user_menu_id`) USING BTREE
) ENGINE=InnoDB CHARACTER SET=utf8 COLLATE=utf8_general_ci COMMENT='用戶菜單表' ROW_FORMAT=Compact;

-- ----------------------------
-- Records of sys_user_menu
-- ----------------------------
INSERT INTO `sys_user_menu` VALUES ('1', '1', '1');
INSERT INTO `sys_user_menu` VALUES ('10', '3', '6');
INSERT INTO `sys_user_menu` VALUES ('11', '3', '7');
INSERT INTO `sys_user_menu` VALUES ('2', '1', '2');
INSERT INTO `sys_user_menu` VALUES ('3', '1', '3');
INSERT INTO `sys_user_menu` VALUES ('4', '1', '4');
INSERT INTO `sys_user_menu` VALUES ('41', '1', '5');
INSERT INTO `sys_user_menu` VALUES ('42', '1', '6');
INSERT INTO `sys_user_menu` VALUES ('43', '1', '7');
INSERT INTO `sys_user_menu` VALUES ('5', '2', '1');
INSERT INTO `sys_user_menu` VALUES ('51', '2', '5');
INSERT INTO `sys_user_menu` VALUES ('52', '2', '6');
INSERT INTO `sys_user_menu` VALUES ('53', '2', '7');
INSERT INTO `sys_user_menu` VALUES ('6', '2', '2');
INSERT INTO `sys_user_menu` VALUES ('7', '2', '3');
INSERT INTO `sys_user_menu` VALUES ('8', '2', '4');
INSERT INTO `sys_user_menu` VALUES ('9', '3', '5');

SET FOREIGN_KEY_CHECKS=1;

　　用戶快捷菜單表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sys_shortcut_menu
-- ----------------------------
DROP TABLE IF EXISTS `sys_shortcut_menu`;
CREATE TABLE `sys_shortcut_menu`  (
  `shortcut_menu_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶快捷菜單id',
  `shortcut_menu_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶快捷菜單名稱',
  `shortcut_menu_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶快捷菜單路徑',
  `user_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用戶id',
  `shortcut_menu_parent_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '上級id',
  PRIMARY KEY (`shortcut_menu_id`) USING BTREE
) ENGINE=InnoDB CHARACTER SET=utf8 COLLATE=utf8_general_ci COMMENT='用戶快捷菜單表' ROW_FORMAT=Compact;

-- ----------------------------
-- Records of sys_shortcut_menu
-- ----------------------------
INSERT INTO `sys_shortcut_menu` VALUES ('s1', '百度', 'https://www.baidu.com', '2', NULL);
INSERT INTO `sys_shortcut_menu` VALUES ('s2', 'layui', 'https://www.layui.com/', '3', NULL);

SET FOREIGN_KEY_CHECKS=1;

　　大家可能會發現我們的系統用戶表有很多字段，又是限制IP地址、又是限制Mac地址，這是基于安全性考慮，系統可以能會限制用戶的登錄地址，這些字段都是一下安全性方面相關，但在這個例子了我并沒有實現這些功能，大家可以沿著我的這個思路實現一下系統安全性功能

　　maven引包

　　Spring Boot提供了一個spring-boot-starter-security啟動程序，它將Spring Security相關的依賴項聚合在一起，使用maven引入

        <!-- security安全校驗 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

　　生成后臺代碼

　　引好包后，使用我們的通用后臺接口與代碼自動生成工具，運行main方法直接生成這六個表的后臺代碼（不知道怎么操作的請看我之前的博客：SpringBoot系列——Spring-Data-JPA（究極進化版）自動生成單表基礎增、刪、改、查接口）

　　核心配置

　　核心配置在SecurityConfig

　　由此也擴展出了用戶認證處理、密碼處理、登錄成功處理、登錄失敗處理、驗證碼處理、errorPage處理，這些我就不貼出來了，大家自己去看代碼　

package cn.huanzi.qch.springbootsecurity.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private CaptchaFilterConfig captchaFilterConfig;

    @Autowired
    private UserConfig userConfig;

    @Autowired
    private PasswordConfig passwordConfig;

    @Autowired
    private LoginFailureHandlerConfig loginFailureHandlerConfig;

    @Autowired
    private LoginSuccessHandlerConfig loginSuccessHandlerConfig;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth
                //用戶認證處理
                .userDetailsService(userConfig)
                //密碼處理
                .passwordEncoder(passwordConfig);
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                // 關閉csrf防護
                .csrf().disable()
                .headers().frameOptions().disable()
                .and()

                //定制url訪問權限
                .authorizeRequests()
                .antMatchers("/layui/**", "/css/**", "/js/**", "/images/**", "/webjars/**", "/getVerifyCodeImage").permitAll()
                //系統相關、非業務接口只能是管理員以上有權限，例如獲取系統權限接口、系統用戶接口、系統菜單接口、以及用戶與權限、菜單關聯接口
                .antMatchers("/sysUser/**","/sysAuthority/**","/sysMenu/**","/sysUserAuthority/**","/sysUserMenu/**").hasAnyAuthority("ROLE_ADMIN","ROLE_SA")
                //admin接口測試
                .antMatchers("/admin/**").hasAnyAuthority("ROLE_ADMIN","ROLE_SA")
                .anyRequest().authenticated()
                .and()

                //登錄處理
                .addFilterBefore(captchaFilterConfig, UsernamePasswordAuthenticationFilter.class)
                .formLogin()
                .loginProcessingUrl("/login")
                .loginPage("/loginPage")
                .failureHandler(loginFailureHandlerConfig)
                .successHandler(loginSuccessHandlerConfig)
                .permitAll()
                .and()

                //登出處理
                .logout()
                .logoutUrl("/logout")
                .logoutSuccessUrl("/loginPage")
                .permitAll()
        ;
    }
}

　　后記

　　這只是一個簡單的演示，數據都是直接在數據庫插入的，應該做成在頁面進行管理，比如：

　　更多的功能我就不展開了，大家直接進行擴展，本文就記錄到這，有什么問題以后再進行補充，具體的代碼已經放到GitHub、碼云上了，SQL文件我也放在了里面，

　　大家可以搞下來跑一下，有什么建議或者問題都可以評論留言

　　代碼開源

　　代碼已經開源、托管到我的GitHub、碼云：

　　GitHub：https://github.com/huanzi-qch/springBoot

　　碼云：https://gitee.com/huanzi-qch/springBoot

版權聲明

作者：huanzi-qch

出處：https://www.cnblogs.com/huanzi-qch

若標題中有“轉載”字樣，則本文版權歸原作者所有。若無轉載字樣，本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利.

著vue3.x越來越穩定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達20.2K+。

// 官網地址
https://v3.vuejs.org/

Vitejs目前的star達到15.7K+。

// 官網地址
https://vitejs.dev/

項目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術架構的仿微信PC端界面聊天實例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術棧

使用技術：vue3.0+vuex4+vue-router4
UI組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動條組件：V3Scroll（基于Vue3自定義虛擬美化滾動條）
iconfont圖標：阿里字體圖標庫

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發的vue3.0自定義彈窗V3Layer組件。

前段時間有過一篇詳細的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動條組件

為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現。

v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項目配置

/**
 * Vue3.0項目配置
 */

const path=require('path')

module.exports={
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網頁
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config=> {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊公共組件

// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins=app=> {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3攔截登錄狀態

vue3.0中使用全局路由鉤子攔截登錄狀態。

router.beforeEach((to, from, next)=> {
    const token=store.state.token

    // 判斷當前路由地址是否需要登錄權限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權
            V3Layer({
                content: '還未登錄授權！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: ()=> {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標處插入表情、多行文本內容。

編輯器抽離了一個公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外還支持粘貼截圖發送，通過監聽paste事件，判斷是否是圖片類型，從而發送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd=e.clipboardData
    let ua=window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length===2 && cbd.items[0].kind==="string" && cbd.items[1].kind==="file" &&
        cbd.types && cbd.types.length===2 && cbd.types[0]==="text/plain" && cbd.types[1]==="Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i=0; i < cbd.items.length; i++) {
        var item=cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind=='file') {
            var blob=item.getAsFile()
            if(blob.size===0) return
            // 讀取圖片記錄
            var reader=new FileReader()
            reader.readAsDataURL(blob)
            reader.onload=function() {
                var _img=this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區域進行發送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter=(e)=> {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver=(e)=> {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop=(e)=> {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList=(filelist)=> {
    let files=filelist.files
    if(files.length >=2) {
        v3layer.message({icon: 'error', content: '暫時支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i=0; i < files.length; i++) {
        if(files[i].type !='') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開發仿微信/QQ聊天實戰項目就分享到這里。

基于vue3.0+vant3移動端聊天實戰|vue3聊天模板實例

做好響應式網站模板的安全性，需要注意以下幾個方面：

1. 代碼安全：確保網站模板的代碼沒有漏洞和安全隱患。這包括檢查和修復可能存在的SQL注入、跨站點腳本攻擊（XSS）、跨站點請求偽造（CSRF）等常見的安全問題。可以使用一些常見的安全檢測工具，如OWASP ZAP、Netsparker等進行代碼審計和漏洞掃描，及時修復發現的問題。

2. 數據安全：合理設置權限和訪問控制，確保敏感數據的安全性。對于用戶輸入的數據，要進行有效的輸入驗證和過濾，防止惡意代碼注入。另外，要對敏感數據進行加密存儲，如用戶密碼可以使用哈希算法進行加密存儲，確保即使數據庫泄露也不會影響用戶的賬戶安全。

3. SSL/TLS 加密：為網站模板啟用SSL/TLS加密，確保傳輸過程中的數據安全。這可以通過在服務器上安裝和配置SSL/TLS證書實現，使網站模板使用HTTPS協議進行訪問。同時，強制網站鏈接使用HTTPS，并啟用HTTP嚴格傳輸安全（HSTS）策略，防止中間人攻擊和SSL剝離等風險。

4. 常見漏洞的預防：在開發網站模板時，要注意預防常見的安全漏洞。如避免使用過于簡單和容易被猜測的密碼，禁用默認的管理員賬戶，使用不可窮舉的會話ID，設置密碼輸入失敗的次數限制等等。此外，在網站上還可以設置防火墻規則、IP黑名單等，增強對惡意攻擊的防范能力。

5. 及時更新補丁：定期檢查和更新服務器、網站模板和相關組件的補丁更新。這樣可以修復已知的漏洞和安全問題，提高安全性。同時，及時更新第三方插件和庫文件，確保使用的組件也是版本，以修復存在的漏洞。

6. 定期備份與容災：定期備份網站模板的數據和文件，以防止意外的數據丟失或遭受攻擊。同時，設置容災機制，如使用多臺服務器進行負載均衡和冗余等，確保網站在服務器故障或網絡中斷時能夠繼續正常運行。

綜上所述，要做好響應式網站模板的安全性，需要從代碼安全、數據安全、SSL/TLS 加密、常見漏洞的預防、及時更新補丁以及定期備份與容災等方面著手。只有綜合考慮以上因素，才能確保網站模板的安全性，保護用戶的隱私和數據安全。

在線咨詢

上一篇：關于前端，你不得不知的 8 種JavaScript
下一篇：Typora - 一款功能強大的高效排版編譯器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

SpringBoot系列-Security + La

前言

效果演示

關鍵代碼

數據表

maven引包

生成后臺代碼

核心配置

后記

代碼開源

版權聲明

項目介紹

技術棧

Vue3.x自定義彈窗組件

Vue3.x自定義美化滾動條組件

vue.config.js項目配置

Vue3引入/注冊公共組件

Vue3攔截登錄狀態

Vue3.x聊天模塊

您的項目需求

　前言

　　效果演示

　　關鍵代碼

　　數據表

　　maven引包

　　生成后臺代碼

　　核心配置

　　后記

　　代碼開源