Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve the login function of Vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Login Overview Login Business process

1. Enter your user name and password on the login page

two。 Call the background API for verification

3. After passing the verification, jump to the project home page according to the response status of the background

Related technical points of login business

Http is stateless to record the state on the client side through cookie, to record the state on the server side through session and to maintain the state through token.

Be clear here!

Login-token principle Analysis

1. Enter a user name and password on the login page to log in

two。 After the verification of the server, the token of the user is generated and returned

3. The client stores the token

4. All subsequent requests are sent with this token

5. The server verifies that the token has passed

Login function realization

The layout of the login page

Implementation of layout through Element-UI components

El-form

El-form-item

El-input

El-button

Font icon

Open the terminal ctrl+~ in vscode

Git status to view current git status

Git checkout-b login creates a new branch called login

Git branch switching branch

Start in vue ui!

The terminal instruction npm run serve can also be run!

Create a vue file under the components file

Import Vue from 'vue'import VueRouter from' vue-router'import login from'. / components/login.vue'Vue.use (VueRouter) const routes = [{path:'/login',component:login}] const router = new VueRouter ({routes}) export default router

Configure routing (and add route redirection)

Const router = new VueRouter ({routes: [{path:'/', redirect:'/ login'}, {path:'/ login', component: login}]})

Be sure to pay attention to the spaces, or you will make a mistake, damn it!

Page compilation

Give me a global style sheet first

/ * Global style sheet * / html,body,#app {height: 100%; margin: 0; padding: 0;}

And import it in main.js

Import'. / assets/css/global.css'

Complete the login box is centered

Note: translate moves to achieve true center

Login _ box {width: 450px; height: 300px; background-color: # fff; position: absolute; left: 50%; top: 50%; transform: translate (- 50% background-color 50%);}

Add a login icon

.avatar _ box {height: 130px; width: 130px; border: 1px solid # eee; border-radius: 50%; padding: 10px; box-shadow: 0px 0px 10px # ddd; position: absolute; left: 50%; transform: translate (- 50% width 50%); background-color: # fff; img {width: 100% Height: 100%; border-radius: 50%; background-color: # eee;}}

The layout of the login form

Implementation of layout through Element-UI components

El-form

El-form-item

El-input

El-button

Font icon

Elements component library web page

You can find some basic template code that can be used on the website.

Import component

Import Vue from 'vue'import {Button, Form, FormItem, Input} from' element-ui'// separate import will error Vue.use (Button) Vue.use (Form) Vue.use (FormItem) Vue.use (Input)

The middle form and button are found directly in the component library above.

Some of the code in the middle is no longer posted, which is more boring.

In particular, our little icons are downloaded from Ali's icon library.

For specific usage, see a blog post written before.

Alibaba icon icon is under control (how to introduce the icon library at the front end, you can dispose of the beautiful icon at your disposal.)

Data binding of login form

1. model = "loginForm" binds a form

two。 Bidirectional binding of data objects with v-model in form-item

3. Data () return form data in export default

Validation rules for login form

1. Rulers = "ruleForm" bind a rule

two。 Set the prop property in form-item to the name of the field that needs to be verified

/ / this is the form's verification rule object loginFormRules: {/ / verify whether the user name is valid username: [{required: true, message: 'please enter a login name', trigger: 'blur'}, {min: 3, max: 10, message:' 3 to 10 characters', trigger: 'blur'}] / / verify whether the password is valid password: [{required: true, message: 'enter login password', trigger: 'blur'}, {min: 6, max: 15, message:' 6 to 15 characters', trigger: 'blur'}]}

Reset of login form

1. Add the ref reference name to the el-form to get the form

two。 Add a method to the method and use this.$refs.loginFormRef.resetFields () to reset the form. Notice that the value of the form becomes the initial value set in data.

Login pre-authentication

1. Same this.$refs.loginFormRef.validate ()

two。 Configure axios

The root path of the import axios from 'axios'// configuration request axios.defaults.baseURL =' https://127.0.0.1:8888/api/private/v1/'Vue.prototype.$http = axios

3. Get the results of the query as follows

Use async and await to get the returned result

This.$refs.loginFormRef.validate (async valid = > {if (! valid) return const {data: res} = await this.$http.post ('login', this.loginForm) console.log (res) if (res.meta.status! = = 200) return console.log (' login failed') console.log ('login successful') login component configuration pop-up prompt

1. Introduce message into element.js and mount it to vue

Vue.prototype.$message = Message / / mounted to Vue

two。 Call this.$message.error directly ('login failed!')

Behavior after successful login

1. Save the token after login to the client's sessionStorage

1. Other API interfaces in the project except login can only be accessed after login.

2.token should only take effect during the opening of the current website, so save token in sessionStorage

The token is stored in the session store

two。 Jump to the background home page via programmatic navigation, and the routing address is / home

Window.sessionStorage.setItem ('token',' res.data.token') / / Save token here is the randomly saved fixed value this.$router.push ('/ home') / / jump route. Go to the next page and share this article on "how to log in in Vue". I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good. Please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.