A login and logout component based on token

notes

1. Relevant technical points of the login business

• http is stateless
• Record state on the client side through cookies
• Record the state on the server side through the session
• Maintain state through token

Notice:

• If there is no cross-domain problem between our front-end and back-end interfaces, we generally use cookies and sessions to record login status
• If there is a cross-domain problem, we generally use token to maintain the login status

2. Token principle analysis

token is the only identity token that guarantees the user's successful login

1. Login page Enter user name and password to log in
2. After the server is authenticated, the token value of the user is generated and returned to the client

   Notice:

   1. token is generated by the server
   2. The token value corresponding to each different user is different
3. The client stores the token
4. All subsequent requests from the client will carry the token to send requests, so that our server can determine which user the request belongs to according to different token values, and return different results for different users
5. The server verifies whether the token exists, if it exists, it proves that it has been logged in, and then returns the corresponding data according to the token

3. Git-related knowledge

• Configure the public key when git is already installed
• instruction
• Check if the current workspace is clean: git status
• Create a branch: git checkout -b "branch name"
• View all branches: git branch (* is the current branch)
• Add content from the working directory to the staging area: git add .
• Add the contents of the temporary storage area to the local warehouse: git commit -m "remarks"
• Merge other branches: git merge "branch name to be merged"

webpack configuration properties - devServer

4. Global styles

• Add the static directory assets/styles under the src directory
• Create a css file in the styles directory
• Import in main.js

// 导入全局样式表
import './assets/styles/reset.css'

// 导入字体图标
import './assets/fonts/iconfont.css'

5. Operation after login

• All of our pages should be accessible only after successful login, so how do we judge whether the login is successful? At this time, we need to use our token, because the token is issued to us by the server after we have successfully logged in. unique token
• We need to perform the following two operations

1. Save the token after successful login to the sessionStorage of the client
   1. There are API interfaces other than login in the project, which must be accessed after login
   2. The token should only take effect when the current website is open, so save the token in sessionStorage

window.sessionStorage.setItem("token", res.data.token);

• Jump to the background homepage through programmatic navigation, the routing address is /home

• // 先在路由表里进行如下配置
      {
        
        
        path: '/home',
        component: Home
      }
  
  // 然后在Login组件里登录成功之后写编程式导航对象调用push方法
  this.$router.push('/home')
  

  6. Implementation of exit function

  • principle:

  • Token-based exit is relatively simple, only need to destroy the local token

  • In this way, subsequent requests will not carry the token, and you must log in again to generate a new token before you can access the page

  • code show as below:

  // 清空token
  window.sessionStorage.clear()
  // 跳转至登录页
  this.$router.push('/login')