全栈JS怎么做用户认证_用户认证机制与JS前后端全栈实现方法详解

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [token, setToken] = useLocalStorage('token', null);

async function handleLogin(e) {
  e.preventDefault();
  try {
    const res = await axios.post('/api/auth/login', { email, password });
    setToken(res.data.token); // 存入localStorage
    alert('登录成功');
  } catch (err) {
    alert('登录失败');
  }
}

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

const userSchema = new mongoose.Schema({
  email: { type: String, unique: true },
  password: String
});

// 保存前加密密码
userSchema.pre('save', async function (next) {
  if (this.isModified('password')) {
    this.password = await bcrypt.hash(this.password, 10);
  }
  next();
});

app.post('/api/auth/login', async (req, res) => {
  const { email, password} = req.body;
  const user = await User.findOne({ email });
  if (!user) return res.status(401).send('用户不存在');

  const isValid = await bcrypt.compare(password, user.password);
  if (!isValid) return res.status(401).send('密码错误');

  const token = jwt.sign(
    { id: user._id, email: user.email },
    process.env.JWT_SECRET,
    { expiresIn: '24h' }
  );

  res.json({ token });
});

function authenticate(req, res, next) {
  const token = req.header('Authorization')?.replace('Bearer ', '');
  if (!token) return res.status(401).send('未提供令牌');

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    res.status(401).send('令牌无效');
  }
}

app.get('/api/profile', authenticate, async (req, res) => {
  res.json({ message: '这是你的个人资料', user: req.user });
});