token authentication mechanism
Recently used the token verification process vue-cli project realization logged in, here are summarized below
1. 登录时,客户端通过用户名与密码请求登录
2. 服务端收到请求去验证用户名与密码
3. 验证通过,服务端会签发一个Token,再把这个Token以响应发给客户端.
4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们是存在cookie
5. 客户端每次像服务器请求API接口时候,都要带上Token. 6. 客户端每次跳转路由的时候也要验证Token登录态 7. 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息.
The first step: get token password + user name, cookie store
Step Two: Route jump condition checking log
First, compare the first two code below
Results: The first piece of code when the page will be routed to jump into an infinite loop
reason: when the next will be recalled router.beforeEach with a path behind the jump is not performed beforeEach when no arguments after the jump next
The third step: axios request interceptor configuration token, when a verification request login state
Pit encountered here:
Axios request header token settings - get set because axios.defaults.headers only when the page initialization time, when the page will lead to not re-initiated the request to acquire landed state, so questions arise, whether in landing state, has landed the state will always exist, in order to avoid this problem, you need to set up an internal request to obtain token, so the token carrying the head set on axios request of interceptors, all in order to get re-acquire the latest state landed every request, there is a pit head is set to use a custom set of interceptors in the request, rather than using axios.defaults.headers default settings because the default setting is a priority in request interceptor performed using the default settings if, in fact, setting the next request is the first request and not this request (token is carried in the axios.defaults.headers)
Step four: axios response interceptor updates cookie
This is done taking into account the user experience, prevent users from using the system process because of cookie expiration abort system
to sum up
Because of this development only if the back-end transfer token transfer in accordance with the front end interfaces to determine whether logged in, log did not check, so more point to consider. Please correct me ill-considered
Original Address: https://segmentfault.com/a/1190000016814541
Reference documents: https://www.cnblogs.com/eret9616/p/9661314.html
Recently used the token verification process vue-cli project realization logged in, here are summarized below
1. 登录时,客户端通过用户名与密码请求登录
2. 服务端收到请求去验证用户名与密码
3. 验证通过,服务端会签发一个Token,再把这个Token以响应发给客户端.
4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们是存在cookie
5. 客户端每次像服务器请求API接口时候,都要带上Token. 6. 客户端每次跳转路由的时候也要验证Token登录态 7. 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息.
The first step: get token password + user name, cookie store
Step Two: Route jump condition checking log
First, compare the first two code below
Results: The first piece of code when the page will be routed to jump into an infinite loop
reason: when the next will be recalled router.beforeEach with a path behind the jump is not performed beforeEach when no arguments after the jump next
The third step: axios request interceptor configuration token, when a verification request login state
Pit encountered here:
Axios request header token settings - get set because axios.defaults.headers only when the page initialization time, when the page will lead to not re-initiated the request to acquire landed state, so questions arise, whether in landing state, has landed the state will always exist, in order to avoid this problem, you need to set up an internal request to obtain token, so the token carrying the head set on axios request of interceptors, all in order to get re-acquire the latest state landed every request, there is a pit head is set to use a custom set of interceptors in the request, rather than using axios.defaults.headers default settings because the default setting is a priority in request interceptor performed using the default settings if, in fact, setting the next request is the first request and not this request (token is carried in the axios.defaults.headers)
Step four: axios response interceptor updates cookie
This is done taking into account the user experience, prevent users from using the system process because of cookie expiration abort system
to sum up
Because of this development only if the back-end transfer token transfer in accordance with the front end interfaces to determine whether logged in, log did not check, so more point to consider. Please correct me ill-considered
Original Address: https://segmentfault.com/a/1190000016814541