JS - single sign on

1、 introduction

Recently, I logged in the process at the front end of the renovation project , Some experience , Share how to achieve single sign on

2、 What is single sign on

Single sign on (Single Sign On), Also abbreviated as sso, This means that after a project is manually logged in , When accessing another project of the same login system, it will automatically log in .

3、 Realization

1、 Ideas

1、 Single point implementation

The normal login process exchanges the account and password to the backend token, Or get it from the back end through the account and password code, In use code Exchange for token, Either way , Eventually, the front end will get a token, Will be token Write to localStorage perhaps cookie, Bring this when the interface requests token Authenticate the backend , To realize the login . On this basis, we add a process , Use a public Iframe To store token, That is, each time the project logs in, it will token Save to public iframe Of localStorage in , When using it, it starts from this iframe Medium localStorage Remove from token, Simply put, each project shares one iframe To access token, Make each project share the same place token, Achieve single sign on .

2、 compatible

Because the login component uses vue2.0 Development , But some projects have started to use vue3.0 Development , Importing a component directly will result in an error , There may even be other framework projects in the future , In order to be compatible with this situation , Put the entire login into iframe To maintain , Including login interface 、 Login interface call 、token Storage and other core login processes , The external provider only contains js Of npm package , Mainly used to create iframe and iframe signal communication . Whether it's vue3.0 Or something else js The framework can directly access login components without burden

2、 Overall process

4、 Advantages and disadvantages

1、 advantage

• Single sign on

• The access of each frame is simple , Don't worry about compatibility , And the access party does not need to consider the interface cross domain problem

• Easy to upgrade , The core processes are iframe in , Process upgrade does not need to be updated npm package

2、 shortcoming

• iframe There is a white screen problem , It is suggested to add loading state

5、 Conclusion

Through the practice of this login, I also stepped on many pits , For example, all login components are based on npm Package form , Lead to vue3 Are not compatible vue2 Components , It took half a May Day holiday to reconstruct iframe form , This article mainly provides the implementation ideas , The implementation of other details is not complicated , It is mainly about the encapsulation and... Of login components iframe Communication between , A lot of knowledge and experience have been gained after the completion of the whole process .