“我喜歡編寫身份驗證和授權(quán)代碼。” ?從來沒有Java開發(fā)人員。 厭倦了一次又一次地建立相同的登錄屏幕？ 嘗試使用Okta API進(jìn)行托管身份驗證，授權(quán)和多因素身份驗證。

Vue是一個Web框架，由于它的精簡和刻薄，最近引起了很多關(guān)注。 它的基準(zhǔn)框架成本約為4萬，被稱為簡約Web框架。 隨著最近對Web性能的關(guān)注以及移動優(yōu)先，移動快速的關(guān)注，Vue變得越來越流行也就不足為奇了。 如果您花時間學(xué)習(xí)AngularJS，很可能會在Vue.js中找到老朋友。

Spring Boot是Java生態(tài)系統(tǒng)中我最喜歡的框架之一。 是的，我有偏見。 自2004年以來，我就一直是Spring Framework的愛好者。能夠使用Spring MVC編寫Java Webapp真是太好了，但是大多數(shù)人都使用XML進(jìn)行配置。 盡管Spring支持JavaConfig，但直到Spring Boot（在2014年）才真正起步。 如今，您再也看不到Spring教程，該教程向您展示了如何使用XML進(jìn)行配置。 做得好，Spring Boot團(tuán)隊！

我之所以寫本教程，是因為我是Vue的忠實擁護(hù)者。 如果您了解我，就會知道我是一個Web框架愛好者。 也就是說，我是Web框架的忠實擁護(hù)者。 就像NBA球迷有一些喜歡的球員一樣，我也有一些喜歡的框架。 Vue最近成為其中之一，我想向您展示原因。

在本文中，我將向您展示如何使用Spring Data JPA和Hibernate構(gòu)建Spring Boot API。 然后，我將向您展示如何創(chuàng)建Vue PWA并對其進(jìn)行自定義以顯示API中的數(shù)據(jù)。 然后，您將添加一些動畫gif，一些認(rèn)證，并祝您玩得開心！

使用Spring Boot構(gòu)建REST API

要開始使用Spring Boot，請導(dǎo)航至start.spring.io并選擇版本2.1.1+。 在“搜索依賴項”字段中，選擇以下內(nèi)容：

• H2 ：內(nèi)存數(shù)據(jù)庫
• Lombok（Lombok） ：因為沒有人喜歡生成（甚至更糟糕的是編寫！）getter和setter。
• JPA ：Java的標(biāo)準(zhǔn)ORM
• 其余存儲庫 ：允許您將JPA存儲庫公開為REST端點(diǎn)
• Web ：具有Jackson（用于JSON），Hibernate Validator和嵌入式Tomcat的Spring MVC

如果您更喜歡命令行，請安裝HTTPie并運(yùn)行以下命令以下載demo.zip 。

http https://start.spring.io/starter.zip dependencies==h2,lombok,data-jpa,data-rest,web \packageName==com.okta.developer.demo -d

創(chuàng)建一個名為spring-boot-vue-example 。 將demo.zip的內(nèi)容demo.zip到其server目錄中。

mkdir spring-boot-vue-example unzip demo.zip -d spring-boot-vue-example/server

在您喜歡的IDE中打開“服務(wù)器”項目，然后運(yùn)行DemoApplication或使用./mvnw spring-boot:run從命令行啟動它。

創(chuàng)建一個com.okta.developer.demo.beer程序包和其中的Beer.java文件。 此類將是保存您的數(shù)據(jù)的實體。

package com.okta.developer.demo.beer;import lombok.Data; import lombok.NoArgsConstructor; import lombok.NonNull;import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id;@Data @NoArgsConstructor @Entity class Beer {public Beer(String name) {this.name = name;}@Id@GeneratedValueprivate Long id;@NonNullprivate String name; }

添加一個利用Spring Data在此實體上執(zhí)行CRUD的BeerRepository類。

package com.okta.developer.demo.beer;import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.rest.core.annotation.RepositoryRestResource;@RepositoryRestResource interface BeerRepository extends JpaRepository<Beer, Long> { }

添加@RepositoryRestResource注釋BeerRepository暴露了其所有的CRUD操作的REST端點(diǎn)。

添加使用此存儲庫的BeerCommandLineRunner并創(chuàng)建一組默認(rèn)數(shù)據(jù)。

package com.okta.developer.demo.beer;import org.springframework.boot.CommandLineRunner; import org.springframework.stereotype.Component;import java.util.stream.Stream;@Component public class BeerCommandLineRunner implements CommandLineRunner {private final BeerRepository repository;public BeerCommandLineRunner(BeerRepository repository) {this.repository = repository;}@Overridepublic void run(String... strings) throws Exception {// Top beers from https://www.beeradvocate.com/lists/us, November 2018Stream.of("Kentucky Brunch Brand Stout", "Marshmallow Handjee", "Barrel-Aged Abraxas","Hunahpu's Imperial Stout", "King Julius", "Heady Topper","Budweiser", "Coors Light", "PBR").forEach(name ->repository.save(new Beer(name)));repository.findAll().forEach(System.out::println);} }

重新啟動您的應(yīng)用程序，您應(yīng)該會在終端上看到印刷的啤酒列表。

添加一個BeerController類來創(chuàng)建一個端點(diǎn)，該端點(diǎn)過濾出的啤酒數(shù)量少于大啤酒。

package com.okta.developer.demo.beer;import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController;import java.util.Collection; import java.util.stream.Collectors;@RestController public class BeerController {private BeerRepository repository;public BeerController(BeerRepository repository) {this.repository = repository;}@GetMapping("/good-beers")public CollectiongoodBeers() {return repository.findAll().stream().filter(this::isGreat).collect(Collectors.toList());}private boolean isGreat(Beer beer) {return !beer.getName().equals("Budweiser") &&!beer.getName().equals("Coors Light") &&!beer.getName().equals("PBR");} }

重新構(gòu)建您的應(yīng)用程序并導(dǎo)航到http://localhost:8080/good-beers 。 您應(yīng)該在瀏覽器中看到優(yōu)質(zhì)啤酒的列表。

使用HTTPie時，您也應(yīng)該在終端窗口中看到相同的結(jié)果。

http :8080/good-beers

使用Vue CLI創(chuàng)建項目

這些天來，創(chuàng)建API似乎很容易，這在很大程度上要?dú)w功于Spring Boot。 在本節(jié)中，我希望向您展示使用Vue創(chuàng)建UI也非常簡單。 我還將向您展示如何使用TypeScript開發(fā)Vue應(yīng)用。 如果您按照以下步驟操作，則將創(chuàng)建一個新的Vue應(yīng)用，從API獲取啤酒名稱和圖像，并創(chuàng)建組件以顯示其數(shù)據(jù)。

要創(chuàng)建Vue項目，請確保已安裝Node.js和Vue CLI 3 。 創(chuàng)建本教程時，我使用了Node 11.3.0。

npm install -g @vue/cli@3.2.1

在終端窗口中，使用cd進(jìn)入spring-boot-vue-example目錄的根目錄并運(yùn)行以下命令。 該命令將創(chuàng)建一個新的Vue應(yīng)用程序并提示您選擇。

vue create client

當(dāng)提示您選擇禮物時，選擇手動選擇功能 。

檢查TypeScript ， PWA和Router功能。 選擇其余問題的默認(rèn)值（按Enter ）。

在終端窗口中，cd進(jìn)入client目錄，然后在您喜歡的編輯器中打開package.json 。 添加與serve腳本相同的start腳本。

"scripts": {"start": "vue-cli-service serve","serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint" },

現(xiàn)在，您可以使用npm start Vue應(yīng)用npm start 。 您的Spring Boot應(yīng)用程序仍應(yīng)在端口8080上運(yùn)行，這將導(dǎo)致您的Vue應(yīng)用程序使用端口8081。我希望您在本教程中始終在8081上運(yùn)行您的Vue應(yīng)用程序。 為確保它始終在此端口上運(yùn)行，請創(chuàng)建一個client/vue.config.js文件，并向其中添加以下JavaScript。

module.exports = {devServer: {port: 8081} };

在瀏覽器中打開http://localhost:8081 ，您應(yīng)該會看到類似下面的頁面。

在Vue中創(chuàng)建良好的Beers UI

到目前為止，您已經(jīng)創(chuàng)建了一個好的啤酒API和一個Vue客戶端，但是尚未創(chuàng)建UI來顯示API中的啤酒列表。 為此，請打開client/src/views/Home.vue并添加一個created()方法。

import axios from 'axios'; ...private async created() {const response = await axios.get('/good-beers');this.beers = await response.data; }

Vue的組件生命周期將調(diào)用created()方法。

John Papa的帶有TypeScript的Vue.js對弄清楚如何將TypeScript與Vue一起使用提供了很大的幫助。 Vue的TypeScript文檔也很有幫助。

您需要安裝axios才能編譯此代碼。

npm i axios

您會看到這會將響應(yīng)數(shù)據(jù)放入本地beers變量中。 要正確定義此變量，請創(chuàng)建一個Beer接口并將Home類的beers變量初始化為一個空數(shù)組。

export interface Beer {id: number;name: string;giphyUrl: string; }@Component({components: {HelloWorld,}, }) export default class Home extends Vue {public beers: Beer[] = [];private async created() {const response = await axios.get('/good-beers');this.beers = await response.data;} }

敏銳的眼睛會注意到，這會在與Vue應(yīng)用程序相同的端口上向/good-beers發(fā)出請求（因為它是相對URL）。 為此，您需要修改client/vue.config.js以使其具有將此URL發(fā)送到Spring Boot應(yīng)用程序的代理。

module.exports = {devServer: {port: 8081,proxy: {"/good-beers": {target: "http://localhost:8080",secure: false}}} };

修改client/src/views/Home.vue的模板，以顯示API中的優(yōu)質(zhì)啤酒列表。

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1>Beer List</h1><div v-for="beer in beers">{{ beer.name }}</div></div> </template>

使用npm start重新啟動Vue應(yīng)用，并在http://localhost:8081上刷新您的應(yīng)用。 您應(yīng)該從Spring Boot API中看到啤酒列表。

創(chuàng)建一個BeerList組件

為了使此應(yīng)用程序易于維護(hù)，請將啤酒清單邏輯和渲染移至其自己的BeerList組件。 創(chuàng)建client/src/components/BeerList.vue并用Home.vue的代碼填充它。 刪除Vue徽標(biāo)，自定義模板的主類名稱，然后刪除HelloWorld組件。 完成后，它應(yīng)該如下所示。

<template><div class="beer-list"><h1>Beer List</h1><div v-for="beer in beers">{{ beer.name }}</div></div> </template><script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import axios from 'axios';export interface Beer {id: number;name: string;giphyUrl: string; }@Component export default class BeerList extends Vue {public beers: Beer[] = [];private async created() {const response = await axios.get('/good-beers');this.beers = await response.data;} } </script>

然后更改client/src/views/Home.vue ，使其僅包含徽標(biāo)和對<BeerList/>的引用。

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><BeerList/></div> </template><script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import BeerList from '@/components/BeerList.vue';@Component({components: {BeerList,}, }) export default class Home extends Vue {} </script>

創(chuàng)建一個GiphyImage組件

為了使外觀看起來更好一點(diǎn)，添加GIPHY組件以根據(jù)啤酒的名稱獲取圖像。 創(chuàng)建client/src/components/GiphyImage.vue并將以下代碼放入其中。

<template><img :src=giphyUrl v-bind:alt=name height="200"/> </template><script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; import axios from 'axios';@Component export default class GiphyImage extends Vue {@Prop() private name!: string;private giphyUrl: string = '';private async created() {const giphyApi = '//api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=1&q=';const response = await axios.get(giphyApi + this.name);const data = await response.data.data;if (data.length) {this.giphyUrl = data[0].images.original.url;} else {this.giphyUrl = '//media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif';}} } </script><!-- The "scoped" attribute limits CSS to this component only --> <style scoped> img {margin: 10px 0 0; } </style>

更改BeerList.vue以在其模板中使用<GiphyImage/>組件：

<div v-for="beer in beers">{{ beer.name }}<br/><GiphyImage :name="beer.name"/> </div>

并將其添加到<script>塊中的components列表中：

import GiphyImage from '@/components/GiphyImage.vue';@Component({components: {GiphyImage}, }) export default class BeerList extends Vue { ... }

在同一文件中，在底部添加<style>部分，然后使用CSS Grid布局將啤酒按行組織。

<style scoped> .grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;grid-auto-rows: minmax(100px, auto); } </style>

您需要將div環(huán)繞在啤酒清單模板上，以使其生效。

<div class="grid"><div v-for="beer in beers">{{ beer.name }}<br/><GiphyImage :name="beer.name"/></div> </div>

進(jìn)行這些更改后，您的用戶界面應(yīng)類似于以下啤酒名稱和匹配圖像列表。

您剛剛創(chuàng)建了一個與Spring Boot API對話的Vue應(yīng)用。 恭喜你！ 🎉

添加PWA支持

Vue CLI開箱即用地支持漸進(jìn)式Web應(yīng)用程序（PWA）。 創(chuàng)建Vue應(yīng)用程序時，您選擇了PWA作為功能。

PWA功能僅在生產(chǎn)中啟用，因為在開發(fā)中緩存資產(chǎn)可能是一個真正的難題。 在client目錄中運(yùn)行npm run build來創(chuàng)建一個可以投入生產(chǎn)的版本。 然后使用serve創(chuàng)建一個Web服務(wù)器并顯示您的應(yīng)用程序。

npm i -g serve serve -s dist -p 8081

您應(yīng)該能夠打開瀏覽器，并在http://localhost:8081看到您的應(yīng)用程序。 第一次嘗試時，我發(fā)現(xiàn)加載頁面沒有呈現(xiàn)任何啤酒名稱，并且所有圖像均相同。 這是因為客戶端嘗試向/good-beers發(fā)出請求，并且在生產(chǎn)模式下未配置任何代理。

要解決此問題，您需要在客戶端中更改URL并將Spring Boot配置為允許從http://localhost:8081進(jìn)行跨域訪問。

修改client/src/components/BeerList.vue以使用Spring Boot API的完整URL。

private async created() {const response = await axios.get('http://localhost:8080/good-beers');this.beers = await response.data; }

如果進(jìn)行這些更改后，您在用戶界面中看不到任何更改，那是因為您的瀏覽器已緩存您的應(yīng)用程序。 使用隱身窗口或清除緩存（在Chrome中： 開發(fā)者工具 > 應(yīng)用程序 > 清除存儲 > 清除網(wǎng)站數(shù)據(jù) ）可解決此問題。

為Spring Boot配置CORS

在服務(wù)器項目中，打開src/main/java/…?/demo/beer/BeerController.java并添加一個@CrossOrigin批注以啟用來自客戶端的跨域資源共享（CORS）（ http://localhost:8081 ） 。

import org.springframework.web.bind.annotation.CrossOrigin; ...@GetMapping("/good-beers")@CrossOrigin(origins = "http://localhost:8081")public Collection<Beer> goodBeers() {

進(jìn)行這些更改后，重建Vue應(yīng)用以進(jìn)行生產(chǎn)，刷新瀏覽器，一切都應(yīng)按預(yù)期呈現(xiàn)。

使用Lighthouse查看您的PWA分?jǐn)?shù)

我在Chrome中進(jìn)行了Lighthouse審核，發(fā)現(xiàn)此應(yīng)用目前得分為81/100。 該報告最突出的抱怨是我沒有使用HTTPS。 為了查看該應(yīng)用使用HTTPS時的評分，我將其部署到Pivotal Cloud Foundry和Heroku 。 我很興奮地發(fā)現(xiàn)它在兩個平臺上都得分很高。

得分為96的原因是因為The viewport size is 939px, whereas the window size is 412px. 我不確定是什么引起了這個問題，也許是CSS Grid布局？

要查看我用來部署所有內(nèi)容的腳本，請參閱heroku.sh隨附的GitHub存儲庫中的heroku.sh和cloudfoundry.sh 。

您將需要在運(yùn)行部署腳本之前初始化Git。 運(yùn)行rm -rf client/.git ，然后運(yùn)行g(shù)it commit -a "Add project" 。

使用Okta添加身份驗證

您可能會想，“這很酷，很容易看出人們?yōu)槭裁赐赩ue。” 嘗試過后，您可能還會挖掘其他工具：使用Okta進(jìn)行身份驗證！ 為什么選擇Okta？ 因為您可以免費(fèi)獲得1,000個每月活躍用戶 ！ 值得一試，尤其是當(dāng)您看到使用Okta將auth添加到Spring Boot和Vue如此容易時。

Okta Spring啟動啟動器

為了保護(hù)您的API，可以使用Okta的Spring Boot Starter 。 要集成此啟動器，請將以下依賴項添加到server/pom.xml ：

<dependency><groupId>com.okta.spring</groupId><artifactId>okta-spring-boot-starter</artifactId><version>0.6.1</version> </dependency> <dependency><groupId>org.springframework.security.oauth.boot</groupId><artifactId>spring-security-oauth2-autoconfigure</artifactId><version>2.1.1.RELEASE</version> </dependency>

現(xiàn)在，您需要配置服務(wù)器以使用Okta進(jìn)行身份驗證。 為此，您需要在Okta中創(chuàng)建OIDC應(yīng)用。

在Okta中創(chuàng)建OIDC應(yīng)用

登錄到您的1563開發(fā)者帳戶（或者注冊 ，如果你沒有一個帳戶）并導(dǎo)航到應(yīng)用程序 > 添加應(yīng)用程序 。 單擊“ 單頁應(yīng)用程序” ，再單擊“ 下一步” ，然后為該應(yīng)用程序命名。 將localhost:8080所有實例更改為localhost:8081 ，然后單擊完成 。

將客戶端ID復(fù)制到您的server/src/main/resources/application.properties文件中。 在其中時，添加與您的Okta域匹配的okta.oauth2.issuer屬性。 例如：

okta.oauth2.issuer=https://{yourOktaDomain}/oauth2/default okta.oauth2.client-id={yourClientId}

將{yourOktaDomain}替換為您的組織機(jī)構(gòu)網(wǎng)址，您可以在開發(fā)人員控制臺的儀表板上找到它。 確保在值中不包括-admin ！

更新server/src/main/java/…?/demo/DemoApplication.java以將其啟用為資源服務(wù)器。

import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer;@EnableResourceServer @SpringBootApplication

進(jìn)行了這些更改之后，您應(yīng)該能夠重新啟動服務(wù)器，并在嘗試導(dǎo)航到http://localhost:8080時看到訪問被拒絕。

Okta的Vue支持

Okta的Vue SDK可讓您將OIDC集成到Vue應(yīng)用程序中。 您可以在npmjs.com上找到有關(guān)Okta的Vue SDK的更多信息。 要安裝，請在client目錄中運(yùn)行以下命令：

npm i @okta/okta-vue@1.0.7 npm i -D @types/okta__okta-vue

Okta的Vue SDK的類型可能會包含在將來的版本中。 我創(chuàng)建了一個添加請求的拉取請求 。

打開client/src/router.ts并添加您的Okta配置。 該router.ts下面還包含了一個路徑BeerList ，這是需要進(jìn)行身份驗證的回調(diào)，以及導(dǎo)航后衛(wèi)需要認(rèn)證/beer-list路徑。 用這個替換您的，然后更新yourClientDomain和yourClientId以匹配您的設(shè)置。 確保刪除{}因為它們只是占位符。

import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; import OktaVuePlugin from '@okta/okta-vue'; import BeerList from '@/components/BeerList.vue';Vue.use(Router); Vue.use(OktaVuePlugin, {issuer: 'https://{yourOktaDomain}/oauth2/default',client_id: '{yourClientId}',redirect_uri: window.location.origin + '/implicit/callback',scope: 'openid profile email', });const router = new Router({mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',name: 'home',component: Home,},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),},{path: '/beer-list',name: 'beer-list',component: BeerList,meta: {requiresAuth: true,},},{ path: '/implicit/callback', component: OktaVuePlugin.handleCallback() },], });router.beforeEach(Vue.prototype.$auth.authRedirectGuard());export default router;

由于您具有BeerList的路由，因此請從client/src/views/Home.vue刪除它。

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"></div> </template><script lang="ts"> import { Component, Vue } from 'vue-property-decorator';@Component export default class Home extends Vue {} </script>

在client/src/App.vue鏈接添加到>BeerList client/src/App.vue 。 您還需要添加代碼來檢測用戶是否已登錄。 替換<template>部分，并將下面的<script>添加到您的App.vue 。

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><template v-if="authenticated"> |<router-link to="/beer-list">Good Beers</router-link></template></div><button v-if="authenticated" v-on:click="logout">Logout</button><button v-else v-on:click="$auth.loginRedirect()">Login</button><router-view/></div> </template><script lang="ts"> import { Component, Vue, Watch } from 'vue-property-decorator';@Component export default class App extends Vue {public authenticated: boolean = false;private created() {this.isAuthenticated();}@Watch('$route')private async isAuthenticated() {this.authenticated = await this.$auth.isAuthenticated();}private async logout() {await this.$auth.logout();await this.isAuthenticated();// Navigate back to homethis.$router.push({path: '/'});} } </script>

重新啟動Vue應(yīng)用程序，您應(yīng)該看到一個登錄按鈕。

單擊它，您將被重定向到Okta。 輸入您用來注冊O(shè)kta的憑據(jù)，您將被重定向回該應(yīng)用程序。 您應(yīng)該看到一個注銷按鈕和一個鏈接，以查看一些優(yōu)質(zhì)啤酒。

如果單擊“ Good Beers”鏈接，您將看到組件的標(biāo)題，但沒有數(shù)據(jù)。 如果您查看JavaScript控制臺，則會看到CORS錯誤。

發(fā)生此錯誤是因為Spring的@CrossOrigin在Spring Security中不能很好地發(fā)揮作用。 要解決此問題，請在DemoApplication.java的主體中添加一個simpleCorsFilter bean。

package com.okta.developer.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.core.Ordered; import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter;import java.util.Collections;@EnableResourceServer @SpringBootApplication public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}@Beanpublic FilterRegistrationBean<CorsFilter> simpleCorsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.setAllowedOrigins(Collections.singletonList("http://localhost:8081"));config.setAllowedMethods(Collections.singletonList("*"));config.setAllowedHeaders(Collections.singletonList("*"));source.registerCorsConfiguration("/**", config);FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));bean.setOrder(Ordered.HIGHEST_PRECEDENCE);return bean;} }

進(jìn)行此更改后，重新啟動服務(wù)器。 要使其在客戶端上全部client/src/components/BeerList.vue ，請修改client/src/components/BeerList.vue的created()方法以設(shè)置授權(quán)標(biāo)頭。

private async created() {const response = await axios.get('http://localhost:8080/good-beers',{headers: {Authorization: `Bearer ${await this.$auth.getAccessToken()}`,},},);this.beers = await response.data; }

現(xiàn)在，您應(yīng)該能夠以經(jīng)過身份驗證的用戶身份查看優(yōu)質(zhì)啤酒清單。

如果可行，那就太好了！ 👍

了解有關(guān)Spring Boot和Vue的更多信息

本教程向您展示了如何構(gòu)建使用諸如Spring Boot和Vue之類的現(xiàn)代框架的應(yīng)用程序。 您學(xué)習(xí)了如何使用Okta的Vue SDK添加OIDC身份驗證和保護(hù)路由。 如果您想觀看本教程的視頻，我將其作為截屏視頻發(fā)布到Y(jié)ouTube上 。

如果您想了解有關(guān)Vue現(xiàn)象的更多信息，我推薦了幾篇文章。 首先，我認(rèn)為這很不錯，它不是由公司（例如Angular + Google和React + Facebook）贊助的，這主要是由社區(qū)推動的。 挑戰(zhàn)Google和Facebook的Solo JavaScript開發(fā)人員是《連線》雜志的一篇文章，解釋了為什么這樣做如此驚人。

關(guān)于JavaScript框架的性能，JavaScript框架的基準(zhǔn)成本是Anku Sethi的一篇有趣的博客文章。 我喜歡他寫這本書的動力：

上周，我對僅在頁面上包含React會產(chǎn)生多少性能影響感到好奇。 因此，我在廉價的Android手機(jī)上運(yùn)行了一些數(shù)字，并對此進(jìn)行了撰寫。

要了解有關(guān)Vue，Spring Boot或Okta的更多信息，請查看以下資源：

• 使用Spring Boot和Vue.js構(gòu)建一個簡單的CRUD應(yīng)用
• 使用Vue.js和Node構(gòu)建基本的CRUD應(yīng)用
• 使用Go和Vue構(gòu)建單頁應(yīng)用
• Spring Boot 2.1：出色的OIDC，OAuth 2.0和反應(yīng)式API支持

您可以在GitHub上找到與本文相關(guān)的源代碼。 主要示例（無身份驗證）在master分支中，而Okta集成在okta分支中。 要簽出本地計算機(jī)上的Okta分支，請運(yùn)行以下命令。

git clone -b okta https://github.com/oktadeveloper/spring-boot-vue-example.git

如果您發(fā)現(xiàn)任何問題，請在下面添加評論，我們將盡力為您提供幫助。 如果您喜歡本教程，則應(yīng)該在Twitter上關(guān)注我的團(tuán)隊 。 我們還有一個YouTube頻道 ，我們在其中發(fā)布屏幕錄像。

該教程有Angular和React版本。

“我喜歡編寫身份驗證和授權(quán)代碼。” ?從來沒有Java開發(fā)人員。 厭倦了一次又一次地建立相同的登錄屏幕？ 嘗試使用Okta API進(jìn)行托管身份驗證，授權(quán)和多因素身份驗證。

使用Spring Boot和Vue進(jìn)行Bootiful開發(fā)最初于2018年12月3日發(fā)布在Okta開發(fā)人員博客上。

翻譯自: https://www.javacodegeeks.com/2019/01/bootiful-development-spring-boot-vue.html

總結(jié)

以上是生活随笔為你收集整理的使用Spring Boot和Vue进行有益的开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。