2017-03-09 39 views
9

Tôi đang làm việc trên SPA với Vue.js và vue-router và bây giờ tôi đang xử lý ủy quyền/xác thực bằng JWT. Tôi đã kết thúc trở lại (điểm cuối API) được sắp xếp, sao cho nó sẽ phát hành một mã thông báo để đáp ứng với thông tin đăng nhập và kiểm tra tiêu đề cần thiết về các yêu cầu tiếp theo. Bây giờ tôi muốn thực hiện phía máy khách (Vue.js).Xác thực JWT với Vue.js

Như tôi đã hiểu, về cơ bản những gì tôi cần làm là yêu cầu xác thực cho tất cả các tuyến đường ngoài '/' và '/ đăng nhập'. Nếu xác thực có mặt thì tôi gửi mã thông báo (được lưu trữ trong localStorage sau khi đăng nhập thành công) trong tiêu đề Cấp phép. Nếu nó không hợp lệ thành công trên máy chủ, thì người dùng sẽ được chuyển hướng đến '/ login' như là kết quả của phản hồi lỗi.

Vì vậy, tôi có một vài câu hỏi về những gì tôi cần phải làm gì để thực hiện điều này:

  1. Làm thế nào để tốt nhất nộp một tiêu đề với tất cả các yêu cầu, ngoài việc để các thiết bị đầu cuối đăng nhập? Tôi biết với JQuery, mà tôi đang sử dụng cho AJAX, tôi có thể cấu hình một 'ajaxSetup' toàn cầu sẽ làm cho tiêu đề được gửi với mỗi yêu cầu, nhưng làm cách nào tôi có thể chỉ định ngoại lệ? Thật cồng kềnh khi cá nhân thêm tiêu đề vào mỗi yêu cầu điểm cuối API.

  2. Tương tự, làm cách nào để thiết lập tính năng kiểm tra xác thực áp dụng cho tất cả các tuyến ngoài 2 đề cập ('/' và '/ đăng nhập')?

  3. Vì tôi đang sử dụng sự hiện diện hoặc xác thực hợp lệ dường như hợp lệ (rõ ràng vì nó vẫn phải được xác thực trên điểm cuối API) để xác định có hiển thị các mục menu nhất định, v.v. để làm cho chi tiết hơn và hiển thị những thứ khác nhau cho các cấp quyền khác nhau, như được xác định bởi trường 'phạm vi' trong trọng tải mã thông báo? Rõ ràng cách đơn giản nhất để xử lý mã thông báo JWT là hoàn toàn xác định xem nó có hiện diện hay không, do đó không cần phân tích cú pháp nội dung ở cuối ứng dụng khách. Nhưng cho rằng JWT không cho phép nội dung có ý nghĩa, đó là một ý tưởng tồi để cố gắng tận dụng ý nghĩa đó ở phía máy khách cũng như máy chủ? Rõ ràng điều này trở nên kém thực tế hơn nếu mã thông báo được mã hóa, vì vậy ý ​​tưởng của tôi là sử dụng mã thông báo không mã hóa (và đảm bảo không có bất kỳ hậu quả nào được hiển thị trong tải trọng).

Trả lời

9

Bạn có thể làm toàn bộ đầu, và khi người dùng được xác thực, thêm tiêu đề toàn cầu token như ví dụ này, tôi đang sử dụng Axios.

axios.defaults.headers.common['Authorization'] = "Bearer"+ authtoken.token 

Để kiểm tra xác thực người dùng hoặc quản lý các phần của trang web, chỉ cần thêm biến toàn cầu và khi người dùng được xác thực đặt biến thành true. Ngoài ra, sử dụng Vuex và nó sẽ được dễ dàng và yếu tố mà bạn muốn ẩn hoặc hiển thị cho người sử dụng chỉ cần thêm v-nếu để các yếu tố tương tự (ví dụ sử dụng Vuex)

<div v-if="this.$store.state.authenticated"> Hide Element from Guests </div> 

Và đối với các tuyến đường, trong bạn tuyến đường thêm lĩnh vực meta để chỉ ra đường dẫn là yêu cầu xác thực

{ 
     path: '/dashboard', 
     component: DashboardPage, 
     name: 'Dashboard', 
     meta: {requiresAuth: true} // Meta Field , you can name it 
} 

trong cấu hình Vue Router của bạn thêm điều hướng vệ sĩ đó kiểm tra sự hiện diện của lĩnh vực meta, và nếu đúng kiểm tra nếu người dùng được xác thực

const router = new VueRouter({ ... }) 

router.beforeEach((to, from, next) => { 
    if(to.meta.requiresAuth) { // check the meta field 
    if(store.state.Authenticated) { // check if the user is authenticated 
     next() // the next method allow the user to continue to the router 
    } 
    else { 
     next('/') // Redirect the user to the main page 
    } 
} 
else { 
    next() 
} 
}) 
+0

Cảm ơn, đó là tiện dụng. Tôi nghĩ tôi nên kiểm tra nếu tuyến đường DID KHÔNG yêu cầu xác thực, nhưng đó là một chi tiết. Vẫn chưa chắc chắn về các phần 1 và 3, nhưng có lẽ nó không thực sự quan trọng khi gửi tiêu đề Cấp quyền khi không cần thiết. –

+0

Đây là hướng dẫn cách đặt tiêu đề toàn cục bằng cách sử dụng ajax http://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http-header-to-ajax-request-with-js- hoặc-jquery nó sẽ không gây ra một vấn đề để gửi mã thông báo mà không được yêu cầu –

Các vấn đề liên quan