vue实现未登录跳转到登录页面的方法

admin
2018-12-28
前端
围观

目的：实现未登录跳转

例子：直接在url地址栏输入...../index,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断，如果没有就跳转到登录页面，有的话就打开。
1、直接在url地址栏输入http://localhost:8080/#/index但是页面会直接跳转到登录页，而且会带上参数。

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(['@/components/Login'],resolve)
  },{
   path: '/home',
   name: 'Home',
   meta: {
    requireAuth: true, // 判断是否需要登录
   },
component: resolve => require(['@/components/Index'],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();
}
});

在你的登陆页面，login 的页面进行数据传递

  //在判断句子里面登陆成功的地方设置
localStorage.setItem('token','token'); // => token 是变量, 后面那个是值localStorage.setItem('变量','值')
if (that.$route.query.redirect){
  let redirect = that.$route.query.redirect;
  console.log(redirect)
  that.$router.push(redirect);
}else {
  that.$router.push({name:"Workbe"})
}

这样就ok了，只有登陆的时候才会存储这个字段，这个本地数据建议更换一个，因为这个是永久保存，不是很安全

作者：admin

上一篇： Electron 脚手架的安装教程
下一篇： axios请求post数据提交转码

如果你觉得作者很棒，可以通过扫码支付打赏哦！
- 微信打赏
- 支付宝打赏

文章评论

如果你觉得作者很棒，可以通过扫码支付打赏哦！