note

1. Technical points related to login business

• http It's stateless
• adopt cookie Record the status on the client
• adopt session Record status on the server side
• adopt token The way to maintain state

Be careful ：

• If there is no cross domain problem between our front-end and back-end interfaces , We usually use cookie and session To record the login status
• If there is a cross domain problem , We usually use token To maintain login status

2. token Principle analysis

token It is the only identity token to ensure that the user logs in successfully

1. On the login page, enter the user name and password to log in
2. After the server passes the authentication, the user's password is generated token value , And return the value to the client

   Be careful ：

   1. token Is generated by the server
   2. Each different user corresponds to token The values are different
3. The client stores the token
4. All subsequent requests from the client will carry this message token Send a request , So that our server can according to different token Value to determine which user the request belongs to , Return different results for different users
5. The server verifies that token Whether there is , If it exists, it proves that you have logged in , And then according to this token To return the corresponding data

3. git Related knowledge

• Already installed git Configure public key if
• Instructions
• Check whether the current workspace is clean ：git status
• Create a branch ：git checkout -b “ Branch name ”
• View all branches ：git branch （ hit * It's the current branch ）
• Adds content from the working directory to the staging area ：git add .
• Add the contents of the staging area to the local repository : git commit -m “ remarks ”
• Merge other branches ：git merge “ Branch name to merge ”

webpack Configuration properties ——devServer

4. Global style

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

//  Import global style sheet 
import './assets/styles/reset.css'

//  Import Font Icon 
import './assets/fonts/iconfont.css'

5. The operation after login

• All of our pages should be accessed only after successful login , So how do we judge whether the login is successful , At this point, we need to use our token, because token After we successfully logged in , The only token issued to us by the server
• We need to perform the following two operations

1. After successful login token, Save to client sessionStorage in
   1. There are other than login in the project API Interface , You must log in to access
   2. token Should only take effect while the current web site is open , So will token Save in sessionStorage in

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

• Jump to the background home page through programmed navigation , The routing address is /home

• //  First, configure the following in the routing table 
      {
        
        path: '/home',
        component: Home
      }
  
  //  And then in Login After successful login in the component, write a programmatic navigation object call push Method 
  this.$router.push('/home')
  

  6. Implementation of exit function

  • principle ：

  • be based on token It's easy to exit in the way of , Just destroy the local token that will do

  • such , Subsequent requests will not carry token, Must log in again to generate a new token Then you can visit the page

  • The code is as follows ：

  //  Empty token
  window.sessionStorage.clear()
  //  Go to the landing page 
  this.$router.push('/login')