溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在AngularJS項目中集成JWT進行身份驗證

發(fā)布時間：2024-10-03 19:44:59 來源：億速云 閱讀：81 作者：小樊 欄目：web開發(fā)

在AngularJS項目中集成JSON Web Tokens（JWT）進行身份驗證涉及多個步驟。以下是一個基本的指南，幫助你完成這個過程：

1. 設置后端服務

首先，你需要一個后端服務來生成和驗證JWT。這里假設你使用的是Node.js和Express。

安裝必要的包

npm install express jsonwebtoken bcryptjs body-parser

創(chuàng)建Express應用

創(chuàng)建一個基本的Express應用，并設置JWT密鑰。

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');

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

const SECRET_KEY = 'your-secret-key';

// 模擬用戶數(shù)據(jù)庫
const users = [
  { id: 1, username: 'user1', password: '$2a$10$EixZaYVK1fsbw1ZfbX3OXePaWxn96p36WQoeG6Lruj3vjPGga36' // 'password1' encrypted
};

// 注冊新用戶
app.post('/register', async (req, res) => {
  const { username, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 10);
  users.push({ id: Date.now(), username, password: hashedPassword });
  res.status(201).send('User registered');
});

// 登錄用戶并返回JWT
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username === username);
  if (!user || !await bcrypt.compare(password, user.password)) {
    return res.status(401).send('Invalid credentials');
  }
  const token = jwt.sign({ id: user.id }, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

// 保護路由
app.get('/protected', verifyToken, (req, res) => {
  jwt.verify(req.token, SECRET_KEY, (err, decoded) => {
    if (err) return res.status(500).send('Failed to authenticate token');
    res.json({ message: 'This is a protected route', user: decoded });
  });
});

// JWT驗證中間件
function verifyToken(req, res, next) {
  const bearerHeader = req.headers['authorization'];
  if (typeof bearerHeader !== 'undefined') {
    const bearerToken = bearerHeader.split(' ')[1];
    req.token = bearerToken;
    next();
  } else {
    res.status(403).send('No token provided');
  }
}

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. 設置AngularJS應用

接下來，我們設置AngularJS應用，并使用$http服務與后端交互。

創(chuàng)建AngularJS應用

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS JWT Authentication</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="mainController">
  <h1>AngularJS JWT Authentication</h1>
  <button ng-click="register()">Register</button>
  <button ng-click="login()">Login</button>
  <button ng-click="protected()">Protected Route</button>
  <div ng-if="message">{{message}}</div>

  <script>
    const app = angular.module('myApp', []);
    app.controller('mainController', ['$scope', '$http', function($scope, $http) {
      $scope.message = '';

      $scope.register = async () => {
        const response = await $http.post('http://localhost:3000/register', { username: 'user1', password: 'password1' });
        $scope.message = response.data;
      };

      $scope.login = async () => {
        const response = await $http.post('http://localhost:3000/login', { username: 'user1', password: 'password1' });
        localStorage.setItem('token', response.data.token);
        $scope.message = response.data;
      };

      $scope.protected = async () => {
        const token = localStorage.getItem('token');
        if (token) {
          const response = await $http.get('http://localhost:3000/protected', { headers: { Authorization: `Bearer ${token}` } });
          $scope.message = response.data.message;
        } else {
          $scope.message = 'No token provided';
        }
      };
    }]);
  </script>
</body>
</html>

3. 運行應用

確保你的后端服務和AngularJS應用都在運行狀態(tài)。

  • 啟動后端服務：

    node server.js

  • 打開AngularJS應用： 打開瀏覽器，訪問http://localhost:3000。

總結

通過以上步驟，你已經(jīng)在AngularJS項目中成功集成了JWT進行身份驗證。用戶可以注冊新賬戶，登錄并訪問受保護的資源。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手