When a vue is redirected, the system determines whether the user is logged on.

Source: Internet
Author: User

When a vue is redirected, the system determines whether the user is logged on.

Determine whether the user has logged on. If the user has not logged on, the login logon route is redirected. if the user has logged on, the login route is redirected normally.

1. First, a status is provided before and after user logon to identify whether the user is logged on (vuex is recommended );

Simply use vuex to show it. You won't be able to visit the official website on your own;

Import Vue from 'vue 'import Vuex from 'vuex' vue. use (Vuex); var state = {isLogin: 0, // initially give an isLogin = 0 indicating that the user has not logged on}; const mutations = {changeLogin (state, data) {state. isLogin = data ;}};

2. Change the logon status during user logon;

This. $ store. commit ('angelogin', '20140901') // change the logon status after logon. isLogin = 100;

Iii. Key Points;

Add a navigation hook to your route entry. For more information, see the code;

1. Set the route to be verified

{Path: '/admin', component: admin, meta: {auth: true} // you do not need to write the route that requires verification for the current route. Do not ask why, visit the official website by yourself}

Ii. Route jump and Verification

Router. beforeEach (to, from, next) => {if (. matched. some (m => m. meta. auth) {// verify the route if (store. state. isLogin = '000000') {// you have logged on to next () // you are redirected to the configured page.} else {// if you are not logged on, the logon page is displayed. query: {Rurl: to. fullPath} indicates passing the current route information to facilitate the jump back after logon; next ({path: '/login', query: {Rurl:. fullPath }}} else {next ()}})

The implementation of the above vue route jump function to determine whether a user is logged on is all the content shared by Alibaba Cloud. I hope to give you a reference and support for the customer's house.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.