关于在vue中实现7天免登录

在vue中实现7天免登录

核心即利用vue的路由守卫beforeEach

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'import './assets/css/icons.css'
import './assets/css/font.css'
import ElementUi from 'element-ui'
import './assets/css/theme-chalk/index.css'
// import '../node_modules/element-ui/lib/theme-chalk/index.css'
import Axios from 'axios'Vue.use(ElementUi)Vue.prototype.$axios = AxiosVue.config.productionTip = falseAxios.defaults.baseURL = '/api'router.beforeEach((to, from, next) => {var hasLogin = localStorage.getItem('token')var time = 604800000;  //1000*60*60*24*7; 604800000if(from.fullPath=='/sign-in'||from.fullPath=='/register'||from.fullPath=='/'){next()}else{if (hasLogin) {Axios.get('/sign/userInfo').then((res) => {if (res.data.code == 200) {var oldTimestamp = localStorage.getItem('timestamp');//以前存的时间戳var nowTimestamp = new Date().getTime();//当前时间戳// 如果当前时间戳> 前面存的时间戳+过期时间 表示已经过期var sumTimestamp = parseInt(oldTimestamp) + time;// console.log('nowTimestamp > sumTimestamp:', nowTimestamp > sumTimestamp);if (nowTimestamp > sumTimestamp) {ElementUi.Message.error('登录已超过7天，请重新登录！！！！');localStorage.clear()if (to.path == '/index' || to.path == '/register' || to.path == '/resetpassword' || to.path == '/sign-in') {next()} else {next('/sign-in')}} else {next()}}else{ElementUi.Message.error(res.data.message);localStorage.clear()if (to.path == '/index' || to.path == '/register' || to.path == '/resetpassword' || to.path == '/sign-in') {next()} else {next('/sign-in')}}})} else {if (to.path == '/index' || to.path == '/register' || to.path == '/resetpassword' || to.path == '/sign-in') {next()} else {next('/sign-in')}}}})new Vue({render: h => h(App),router: router
}).$mount('#app')

关于在vue中实现7天免登录相关推荐

Vue 中调用 QQ官方的登录
第一步:参考文档: 准备工作(opens new window) QQ互联JS_SDK 由于域名是 www.corho.com 和 localhost 不一致无法回调页面,需要再本地修改 hosts ...
Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中
场景使用vue实现一个登录页面时,实现记住密码功能. 在勾选了记住密码后将密码存储到Cookie中,然后下次直接从Cookie中取. 注: 博客: https://blog.csdn.net/bad ...
vue中实现二维码登录功能
1.在项目的控制台下载插件: npm install vue-wxlogin --save-dev 2.导入该组件 <script> import Wxlogin from 'vue-wx ...
【git】【eclipse】免密/SSH 方式连接免登录
前言 https://gitee.com eclipse 4.9.0 eclipse 的 git 插件 : eclipse 自带的 git 插件 EGit ssh方式免登录现在eclipse中生成s ...
SpringBoot Thymeleaf Vue Mybatis 登录和注册的实现，以及使用Cookie实现七天免登录
文章目录 5. 功能实现 5.1 用户注册和登录功能前端页面后台登录和注册 5.2 未登录拦截 5.3 七天内免登录 Cookie 和 Session Cookie简介 Cookie 的使用利用 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...

关于在vue中实现7天免登录

在vue中实现7天免登录

关于在vue中实现7天免登录相关推荐

最新文章

热门文章