Vue-oidc-client集成IdentityServer4

IdentityServer4：https://github.com/IdentityServer/ (后端的)

identitymodel: https://github.com/identitymodel 

vuex-oidc: https://github.com/perarnborg/vuex-oidc/wiki 

打开项目：Vue.Demo 安装依赖

npm install --save vuex
npm install --save json-markup

新建：oidc.js

//export const oidcSettings = JSON.parse(process.env.VUE_APP_OIDC_CONFIG)id_token token
export const oidcSettings = {
    "authority": "http://localhost:5000",
    "clientId": "js",
    "redirectUri": "http://localhost:8080/oidc-callback",
    "responseType": "code",
    "scope": "openid profile vue.api",
    "automaticSilentRenew": true,
    "silentRedirectUri": "http://localhost:8080/silent-renew-oidc.html"
}

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import OidcCallback from './components/OidcCallback.vue'
import OidcCallbackError from './components/OidcCallbackError.vue'
import { vuexOidcCreateRouterMiddleware } from 'vuex-oidc'
import store from './store'

Vue.use(Router)

const router = new Router({
    //mode: 'history',
    routes: [{
            path: '/',
            component: Home,
            meta: {
                isPublic: true
            },
            name: "home"
        },
        { path: '/welcome', component: Welcome, name: "welcome" },
        {
            path: '/protected',
            name: 'protected',
            component: () =>
                import ( /* webpackChunkName: "protected" */ './components/Protected.vue')
        },
        { path: '/oidc-callback', component: OidcCallback, name: "oidcCallback" },
        {
            path: '/oidc-callback-error', // Needs to match redirect_uri in you oidcSettings
            name: 'oidcCallbackError',
            component: OidcCallbackError,
            meta: {
                isPublic: true
            }
        }
    ]
})

router.beforeEach(vuexOidcCreateRouterMiddleware(store, 'oidcStore'))

export default router

其它详见源代码：https://github.com/XXXXX34/Vue.Demo/tree/master/Vue 

最终运行效果：