login cookie

src/main/index.js

@@ -23,12 +23,15 @@ function createLoginWindow() {
     show: false,
     frame: false,
     autoHideMenuBar: true,
+    maximizable: false,
+    resizable: false,
     icon: join(__dirname, '../../resources/logo2.ico'),
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      nodeIntegration: true
+      nodeIntegration: true,
+      contextIsolation: false,  // 沙箱取消
     }
   })
   loginWindow.type = 'login'  // 唯一标识
@@ -50,6 +53,8 @@ function createLoginWindow() {
   loginWindow.on('closed', () => {
     loginWindow = null
   })
+
+  remote.enable(loginWindow.webContents)
 }
 //主窗口
 function createMainWindow() {

src/renderer/src/views/login/index.vue

@@ -7,25 +7,18 @@
       <img class="welcome-img" :src="leftBg2" />
     </div>
     <div class="box-item login">
-      <WindowTools :isHasMax="false"/>
+      <WindowTools :isHasMax="false" />
       <div class="login-title">账号登录</div>
       <el-form ref="formRef" class="login-form" :model="loginForm" :rules="rules" size="large">
         <el-form-item prop="username">
           <el-input v-model.trim="loginForm.username" placeholder="请输入用户名" />
         </el-form-item>
         <el-form-item prop="password" style="margin-bottom: 15px">
-          <el-input
-            v-model="loginForm.password"
-            autocomplete="on"
-            type="password"
-            placeholder="请输入密码"
-          />
+          <el-input v-model="loginForm.password" autocomplete="on" type="password" placeholder="请输入密码" />
         </el-form-item>
         <el-checkbox class="flex mb-5" v-model="loginForm.rememberMe">记住密码</el-checkbox>
         <el-form-item>
-          <el-button :loading="btnLoading" class="btn" type="primary" @click="submitForm(formRef)"
-            >登录</el-button
-          >
+          <el-button :loading="btnLoading" class="btn" type="primary" @click="submitForm(formRef)">登录</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -42,6 +35,8 @@ import leftBg2 from '@/assets/images/login/left-bg2.png'
 import WindowTools from '@/components/window-tools/index.vue'
 import SelectSubject from '@/components/select-subject/index.vue'
 
+const { BrowserWindow, session } = require('@electron/remote')
+
 const { ipcRenderer } = window.electron || {}
 const formRef = ref()
 const userStore = useUserStore()
@@ -59,58 +54,86 @@ const rules = reactive({
   password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }]
 })
 
+let curWinUrl;
+
 //登录
 const submitForm = async (formEl) => {
   if (!formEl) return
   await formEl.validate(async (valid) => {
     if (valid) {
       btnLoading.value = true
+
       // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
       if (loginForm.rememberMe) {
-        localStorage.setItem('username', loginForm.username)
-        localStorage.setItem('password', encrypt(loginForm.password))
-        localStorage.setItem('rememberMe', loginForm.rememberMe)
-       
+        await setCookie('username', loginForm.username)
+        await setCookie('password', encrypt(loginForm.password))
+        await setCookie('rememberMe', loginForm.rememberMe.toString())
       } else {
         // 否则移除
-        localStorage.removeItem('username')
-        localStorage.removeItem('password')
-        localStorage.removeItem('rememberMe')
+        await session.defaultSession.clearStorageData({
+          origin: curWinUrl,
+          storages: ['cookies']
+        })
       }
-      try{
+
+      try {
         await userStore.login(loginForm)
         await userStore.getInfo()
-        if(userStore.user.edustage || userStore.user.edusubject){
+        if (userStore.user.edustage || userStore.user.edusubject) {
           ElMessage.success('登录成功')
           ipcRenderer && ipcRenderer.send('openMainWindow')
         }
-        else{
+        else {
           isSubject.value = true
         }
 
-      }finally{
+      } finally {
         btnLoading.value = false
       }
     }
   })
 }
 
-const successEditSubject = ()=>{
+const successEditSubject = () => {
   isSubject.value = false
   ElMessage.success('登录成功')
   ipcRenderer && ipcRenderer.send('openMainWindow')
 }
 
-const getCookie = () => {
-  const username = localStorage.getItem('username')
-  const password = localStorage.getItem('password')
-  const rememberMe = localStorage.getItem('rememberMe')
-  loginForm.username = username ? username : loginForm.username 
-  loginForm.password = password ?  decrypt(password) : loginForm.password
-  loginForm.rememberMe = rememberMe ? Boolean(rememberMe) : false
+const getCookie = async () => {
+  const username = (await getCookieDetail('username'))[0]
+  const password = (await getCookieDetail('password'))[0]
+  const rememberMe = (await getCookieDetail('rememberMe'))[0]
+  loginForm.username = username ? username.value : loginForm.username
+  loginForm.password = password ? decrypt(password.value) : loginForm.password
+  loginForm.rememberMe = rememberMe ? Boolean(rememberMe.value) : false
 }
 
-onMounted(()=>{
+// 获取cookie
+const getCookieDetail = (name) => {
+  return session.defaultSession.cookies.get({ url: curWinUrl, name })
+}
+
+// 设置cookie
+const setCookie = (name, value) => {
+  // 30天过期
+  let Days = 30;
+  let times = Math.round(Date.now() / 1000) + Days * 24 * 60 * 60
+  const cookie = {
+    url: curWinUrl,
+    name,
+    value,
+    expirationDate: times
+  }
+  return session.defaultSession.cookies.set(cookie)
+}
+
+
+
+onMounted(() => {
+  // 当前窗口URL
+  curWinUrl = BrowserWindow.getFocusedWindow().webContents.getURL()
+
   getCookie()
 })
 </script>
@@ -122,9 +145,11 @@ onMounted(()=>{
   align-items: center;
   justify-content: center;
   -webkit-app-region: drag;
+
   .box-item {
     width: 444px;
     height: 520px;
+
     &.desc {
       background: #ffffff;
       border-radius: 12px 0px 0px 12px;
@@ -136,14 +161,17 @@ onMounted(()=>{
       justify-content: flex-start;
       background-color: #003b94;
     }
+
     &.login {
       background: #ffffff;
       border-radius: 0px 12px 12px 0px;
       padding: 34px 42px;
       position: relative;
     }
+
     .welcome {
       padding-top: 35px;
+
       p {
         color: #ffffff;
         line-height: 25px;
@@ -153,11 +181,13 @@ onMounted(()=>{
         font-size: 26px;
       }
     }
+
     .welcome-img {
       margin-top: 20px;
       width: 350px;
       height: 350px;
     }
+
     .login-title {
       font-size: 20px;
       text-align: center;
@@ -165,8 +195,10 @@ onMounted(()=>{
       margin-bottom: 35px;
       margin-top: 50px;
     }
+
     .login-form {
       -webkit-app-region: no-drag;
+
       .captcha-input {
         width: 60%;
       }
@@ -189,18 +221,20 @@ onMounted(()=>{
     }
   }
 }
+
 .header-tool {
   position: absolute;
   right: 0;
   top: 0;
   -webkit-app-region: no-drag;
+
   span {
     padding: 5px 10px;
     cursor: pointer;
   }
 }
+
 .el-form-item {
   margin-bottom: 40px;
 }
-
 </style>