vue实现未登陆跳转到登陆页面

环境：vue 2.9.3; webpack;vue-router

目的：实现未登陆跳转

例子：直接在url地址栏输入...../home,可是这个页面要求须要登录以后才能进入,判断的值就经过登录以后给本地缓存存入的token判断，若是没有就跳转到登陆页面，有的话就打开。

图示：

一、直接在url地址栏输入http://127.0.0.1:9000/#/home,可是页面会直接跳转到登陆页，并且会带上参数。

 

--------------------------------------------分割线----------------------------------------------

vue-router须要安装

首先配置路由

/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 用来判断该路由是否须要登陆。

而后配置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(); } });

这里是登陆时存入的token

##这样的话登陆时就会直接跳转到登陆页面。

实现登陆成功后再跳回开始输入的页面，就要用到后面传递的值了。

若是包含redirect就跳转到刚刚输入的页面。

注意：若是将用户数据保存到localstorage是不合理的，这里只是给出一种思路，若是登录以后不清空浏览器数据，token一直存在的，判断就会失效。