在 Vue 3 中進行登錄並通過加密串進行後端驗證，一般步驟是：用户輸入用户名和密碼，前端將其加密後發送給後端進行驗證，後端驗證通過後，返回身份驗證信息（如令牌），前端接收驗證結果並實現登錄跳轉。

主要步驟：

1. 用户輸入信息並加密
   用户輸入的密碼可以通過加密算法（如 SHA256, AES 等）進行加密，確保數據的安全性。
2. 發送請求到後端
   前端將加密後的數據發送到後端進行驗證，通常使用 POST 請求。
3. 後端驗證加密數據
   後端解密並驗證用户的身份，如果驗證通過，後端通常會生成一個 JWT（JSON Web Token）或 session 來管理用户的登錄狀態，並返回給前端。
4. 前端接收身份驗證信息
   如果後端返回的身份驗證信息有效，前端會存儲該信息（如 JWT），並根據需要跳轉到目標頁面。
5. 頁面跳轉
   登錄成功後，前端會跳轉到指定頁面，通常是用户的個人中心或主頁。

示例代碼

1. 安裝依賴（如使用加密算法）

如果你要在 Vue 3 中使用加密算法，比如 crypto-js，可以先安裝相應的包。

npm install crypto-js

2. 前端代碼（Vue 3）

登錄頁面的代碼（login.vue）

<template>
  <div class="login-container">
    <input v-model="username" placeholder="用户名" type="text" />
    <input v-model="password" placeholder="密碼" type="password" />
    <button @click="login">登錄</button>
  </div>
</template>

<script>
import axios from 'axios';
import CryptoJS from 'crypto-js';  // 導入加密庫

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      // 使用 CryptoJS 加密密碼
      const encryptedPassword = CryptoJS.SHA256(this.password).toString(CryptoJS.enc.Base64);

      try {
        // 發送登錄請求
        const response = await axios.post('https://your-backend-url.com/login', {
          username: this.username,
          password: encryptedPassword
        });

        if (response.data.success) {
          // 登錄成功，保存 token 或 session
          localStorage.setItem('auth_token', response.data.token);
          // 跳轉到目標頁面
          this.$router.push('/dashboard');
        } else {
          // 登錄失敗，顯示錯誤信息
          alert('用户名或密碼錯誤');
        }
      } catch (error) {
        console.error('登錄請求失敗:', error);
        alert('請求失敗，請稍後再試');
      }
    }
  }
};
</script>

<style scoped>
/* 登錄頁面樣式 */
</style>

在這個示例中：

• 用户輸入用户名和密碼。
• 使用 CryptoJS.SHA256() 對密碼進行加密，並轉換為 Base64 字符串。
• 將加密後的密碼和用户名一起通過 axios 發送到後端進行驗證。
• 後端返回驗證結果（通常是 JWT 或其他認證信息），前端保存這個信息（如存儲在 localStorage 中）。
• 如果登錄成功，跳轉到 dashboard 頁面。

3. 後端代碼（Node.js 示例）

後端驗證時，假設你使用 Node.js 和 Express。以下是一個簡單的後端示例：

const express = require('express');
const bcrypt = require('bcrypt');  // 用於密碼加密對比
const jwt = require('jsonwebtoken');  // 用於生成 token

const app = express();
app.use(express.json());

const users = [
  { username: 'test', password: '$2b$10$4NUCUJqZ5tYYPTeRR9g0DeOl6mIXOGqumXbI3mMz5EOBCK2X3tkf6' }  // 密碼為 '123456' 的加密字符串
];

const secretKey = 'your-secret-key';

// 登錄接口
app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // 查找用户
  const user = users.find(u => u.username === username);
  if (!user) {
    return res.status(401).json({ success: false, message: '用户名不存在' });
  }

  // 比對密碼
  bcrypt.compare(password, user.password, (err, isMatch) => {
    if (err) {
      return res.status(500).json({ success: false, message: '服務器錯誤' });
    }

    if (isMatch) {
      // 密碼匹配，生成 JWT Token
      const token = jwt.sign({ username: user.username }, secretKey, { expiresIn: '1h' });
      return res.json({ success: true, token });
    } else {
      return res.status(401).json({ success: false, message: '密碼錯誤' });
    }
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

在這個示例中：

• 後端接收到前端發送的加密後的密碼。
• 使用 bcrypt.compare() 方法比較加密後的密碼與數據庫中存儲的加密密碼。
• 如果驗證通過，使用 jwt.sign() 生成一個 JWT，並返回給前端。

4. 前端跳轉

在前端 Vue 3 代碼中，登錄成功後使用 Vue Router 跳轉：

this.$router.push('/dashboard');

其他注意事項

• 加密算法選擇：SHA256 是一種單向加密算法，適合用於加密密碼或敏感信息。可以根據需要選擇更強的加密方式（如 AES 等對稱加密）。
• 後端加密算法匹配：前端傳輸的是加密後的密碼，後端需要能正確解密或比對加密的密碼。一般情況下，前端加密後使用 bcrypt 等算法在後端進行比對。
• Token 存儲：一般情況下，將 JWT 存儲在 localStorage 或 sessionStorage 中。也可以考慮將其存儲在 HttpOnly cookie 中來增強安全性，避免 XSS 攻擊。
• HTTPS：確保前後端通信使用 HTTPS，避免中間人攻擊（MITM）。

總結

通過以上步驟，你可以在 Vue 3 中實現通過加密串進行後端驗證並實現登錄跳轉。關鍵是確保前後端加密和解密算法的一致性，以及在登錄成功後正確處理令牌和跳轉。