Step by step to build your own management system User profile

Today, only one User profile interface has been completed. 

component code

<div class="row">
  <div class="col-md-12">
    <nb-card>
      <nb-card-header><h2>User Profile</h2></nb-card-header>
      <nb-card-body>
        <div class="row">
          <div class="col-6">
            <div class="form-group row clearfix">
              <label class="col-3 control-label">Picture</label>
              <div class="col-9">
                <div class="userpic">
                  <div class="userpic-wrapper">
                    <img src="assets/images/jack.png">
                  </div>
                  <i class="ion-ios-close-outline"></i>
                  <a href class="change-userpic">Change Profile Picture</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-6"></div>
        </div>
        <div class="row">

        </div>
        <h5 class="with-line">Contact Information</h5>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group row clearfix">
              <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="inputEmail3" placeholder="" value="[email protected]">
              </div>
            </div>
            <div class="form-group row clearfix">
              <label for="inputPhone" class="col-sm-3 control-label">Phone</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="inputPhone" placeholder="" value="+1 (23) 145258584">
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group row clearfix">
              <label class="col-sm-3 control-label">Join Date</label>

              <div class="col-sm-9">
                <input type="text" class="form-control"  placeholder="" value="2018-04-01" disabled="true">
              </div>
            </div>
            <div class="form-group row clearfix">
              <label  class="col-sm-3 control-label">Last login</label>
              <div class="col-sm-9">
                <input type="text" class="form-control"  placeholder="" value="2018-04-01 20:12" disabled="true">
              </div>
            </div>
          </div>
        </div>
        <button type="button" class="btn btn-primary btn-with-icon save-profile">
          <i class="ion-android-checkmark-circle"></i>Update Profile
        </button>
      </nb-card-body>
    </nb-card>
  </div>
</div>

 

Considering that it is convenient to obtain user information at that time, the background adds the user id to the token. 

The addition method is to rewrite the enhance method of the accessTokenConverter bean.

  @Bean
    public JwtAccessTokenConverter accessTokenConverter() {
        JwtAccessTokenConverter converter = new JwtAccessTokenConverter() {
        	/**
        	 *   add addition information,  user_id  into token string
        	 */
			@Override
			public OAuth2AccessToken enhance(OAuth2AccessToken accessToken, OAuth2Authentication authentication) {
				Map<String, Object> info = new LinkedHashMap<String, Object>(accessToken.getAdditionalInformation());
				
				Object userAdditionDetial = authentication.getUserAuthentication().getPrincipal();
				if(userAdditionDetial instanceof UserAdditionDetial) {
					info.put(JwtTokenUtil.USER_ID, ((UserAdditionDetial) userAdditionDetial).getUserId());
				}
				if(accessToken instanceof DefaultOAuth2AccessToken) {
					((DefaultOAuth2AccessToken) accessToken).setAdditionalInformation(info);
				}
				return super.enhance(accessToken, authentication);
			}
        	
        };
        converter.setSigningKey(signingKey);
        return converter;
    }
    

 

When a new token is generated, it will have its own added information.

 

Repository: https://gitee.com/codefans/fmanager 

          https://gitee.com/codefans/admin-cli

Welcome friends to join us