vue login verification

Reprinted: https://www.jb51.net/article/143910.htm

Objective: To achieve the unregistered Jump

Example: directly in the url address bar ..... / home, but after this landing page requirements need to enter a value judgment on to the local cache stored by the judge after landing token, if not jump to the login page some words will open.

Icon:

1, direct input in the url address bar http://127.0.0.1:9000/#/home , but the page will jump directly to the login page, and will bring parameters.

vue-router need to install

First, configure routing

/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',// 登录
   name: 'Login',
   component: resolve => require(['@/PACS/pages/Login'],resolve)
  },{
   path: '/home',
   name: 'Home',
   meta: {
    requireAuth: true, // 判断是否需要登录
   },
   component: resolve => require(['@/PACS/pages/Home'],resolve)
  }
  ]
})
 ## 增加了字段 requireAuth 用来判断该路由是否需要登录。

Then configure main.js

// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
  console.log('需要登录');
  if (localStorage.token) { // 判断当前的token是否存在 ； 登录存入的token
   next();
  }
  else {
   next({
    path: '/',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
   })
  }
 }
 else {
  next();
 }
});

Here are deposited login token

Login ## so it will jump directly to the login page.

Achieve a successful login page and then jump back to the start input, it is necessary to use the value passed behind.

If you jump to the page containing redirect just entered.

Note: If you save user data to localstorage is unreasonable, given here only an idea, you do not empty your browser if data after landing, token there has been a judge will fail.