Vue Authentication Login

Vue Login Routing Verification

The login status of Vue's project if it is managed with Vuex state, the state of the page refresh Vuex management disappears, so the login route verification is meaningless. You can write the status of the login to the Web storage for storage management.

The steps are as follows:

1, in the login component, the login status is written to the Web storage. (Generally written session Storage, sessions closed, stored data automatically deleted)

if (' Login successful ')

{Sessionstorage.setitem (' Accesstoken '), writing a login token that was successfully returned by the login or the custom judgment string}

2. Join the login Verification identifier Requiresauth (custom) in the routing meta information that requires login authentication

[HTml] routers: [                    { path:  '/listinfo ',                      name:  ' Listinfo ',                      component:  listInfo,                      meta: {  requiresAuth: true                                    }                       }                  ]     View plain  copy

3. Verify that the page needs to be logged in the Global hook function Beforeeach

Router.beforeeach (to, from, next) = = {

To the target route object to be entered, the route from which the current navigation is going to leave, Next: function hooks for next execution

if (To.path = = = '/login ') {Next ()}//If the login route is about to be entered, direct release

else {//entered is not a login route

if (To.meta.requiresAuth &&!sessionstorage.getitem (' Accesstoken ')) {next {path: '/login '}}

The next-hop route requires logon authentication and is not yet logged in, the route is directed to the login route

else {next ()}}//If login verification is not required, or if login is successful, direct release

}

Note: Beforeeach This global hook is placed in front of the global component and placed behind the global component, and the Vue instance is already loaded. When you enter the route to go directly in the address bar of the browser, you will not be directed to the login route.