一步一步构建自己的管理系统 User profile

今天只整了一个User profile 的界面。 

component 代码

<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>

后台考虑到到时候方便获取用户信息， 把用户id 加到token 里面去。 

添加方法是 accessTokenConverter bean 的enhance 方法重写一下。

  @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;
    }
    

生成新的token就会有自己添加的信息了

仓库：https://gitee.com/codefans/fmanager 

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

欢迎小伙伴加入一起耍