Vue中进行分布式鉴权与认证的过程

npm install jsonwebtoken --save

import jwt from 'jsonwebtoken';

const token = jwt.sign({ username: 'admin' }, secretKey);
res.json({ token });

localStorage.setItem('token', token);
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

const token = req.headers.authorization.split(' ')[1];
const decoded = jwt.verify(token, secretKey);
res.json({ username: decoded.username });

const clientId = 'clientId';
const clientSecret = 'clientSecret';

import VueOAuth2OIDC from 'vue-oauth2-oidc';
Vue.use(VueOAuth2OIDC, {
  issuer: 'https://auth-server',
  client_id: clientId,
  client_secret: clientSecret,
  redirect_uri: 'https://vue-app/callback',
  scope: 'openid profile email',
  response_type: 'code',
  grant_type: 'authorization_code',
  token_endpoint_auth_method: 'client_secret_basic',
  userinfo_endpoint: 'https://auth-server/userinfo',
  jwks_uri: 'https://auth-server/.well-known/jwks.json',
});

this.$oidc.signIn().then(() => {
  console.log('Signed in');
});
this.$oidc.signOut().then(() => {
  console.log('Signed out');
});

npm install cas-server --save

import VueCasAuthentication from 'vue-cas-authentication';
Vue.use(VueCasAuthentication, {
  casServerUrlPrefix: 'https://cas-server',
  serviceUrl: 'https://vue-app/callback',
});

this.$cas.login().then(() => {
  console.log('Logged in');
});
this.$cas.logout().then(() => {
  console.log('Logged out');
});