Vue路由使用localStorage设置token及过期时间

login.vue

methods: {
    handleLogin () {
      nextTick(() => {
        axios({
          url: 'http://192.168.19.155:8866/user/login',
          method: 'post',
          params: {
            account: this.loginForm.username,
            password: this.loginForm.password
          }
        }).then(res => {
          if (res.success) {
            Message.success('登录成功')
            //存储本地token
            let Data = Object.assign({ name: 'token', val: res.success }, { startTime: new Date().getTime() });
            localStorage.setItem("token", JSON.stringify(Data));
            router.push({ name: "index" })
          } else {
            Message.error(res.message)
          }
        })
      })
    }
  }

router.js

const router = new VueRouter({
  mode: "hash",
  // base: process.env.BASE_URL,
  routes
});


// 一小时
let OneHour = 3600000

router.beforeEach((to, from, next) => {
  if (to.name=='index') {
    //页面是否登录,本地存储中是否有token的数据
    let K = localStorage.getItem("token");
    try {
        K = JSON.parse(K);
    } catch (err) {}
    if (K) {
      let date = new Date().getTime();
      // 如果大于就是过期了
      if (date - K.startTime > OneHour) {
          localStorage.removeItem('token');
          next({ name: "login" });
      } else {
        next();
      }
    } else {
      next({ name: "login" });
    }
  } else {
    next();
  } 
})

export default router;

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 当检测到页面没有Token时,可以使用Vue路由守卫来实现跳转到登录页面,具体代码如下:router.beforeEach((to, from, next) => {if (!token) {next({ path: '/login' })} else {next()}}) ### 回答2: 在Vue中,可以通过路由守卫来控制页面的访问权限。当页面没有Token时,可以通过路由守卫来自动跳转到登录页。 首先,需要在项目中安装vue-router,可以使用以下命令进行安装: ``` npm install vue-router ``` 然后,在路由配置文件中设置路由守卫。假设登录页的路由路径为"/login",可以在全局前置守卫中判断页面是否有Token,如果没有,则自动跳转到登录页。代码如下: ```javascript // 导入VueVue-router import Vue from 'vue' import VueRouter from 'vue-router' // 安装Vue-router Vue.use(VueRouter) // 创建路由实例 const router = new VueRouter({ // 路由配置 routes: [ // 其他页面的路由配置 ... { path: '/login', component: Login } ] }) // 全局前置守卫 router.beforeEach((to, from, next) => { // 判断是否有Token const token = localStorage.getItem('token') // 假设Token保存在localStorage中 if (token) { // 有Token,允许访问页面 next() } else { // 没有Token,跳转到登录页 next('/login') } }) // 导出路由实例 export default router ``` 在上述代码中,我们在全局前置守卫中判断是否存在Token,如果存在,可以访问页面,如果不存在,会跳转到"/login"页面。 当访问其他需要权限的页面时,会先经过全局前置守卫,根据Token的存在与否执行相应的跳转逻辑。 ### 回答3: Vue路由守卫是一种在导航过程中控制页面访问权限的方法。当我们使用Vue框架开发前端应用时,可以通过路由守卫来监测用户是否具有正确的登录凭证(如Token),如果没有,则可以将用户重定向到登录页。 下面是一个简单的示例代码,展示了如何使用Vue路由守卫来实现上述功能: 在main.js文件中,我们需要引入VueVue Router,并创建一个Vue实例,并使用Vue Router配置路由。 ``` import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) // 定义路由 const routes = [ { path: '/login', component: Login }, { path: '/dashboard', component: Dashboard } ] // 创建路由实例 const router = new VueRouter({ routes }) // 添加路由守卫 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') // 假设我们的Token存在localStorage中 // 如果用户访问的是登录页,则直接放行 if (to.path === '/login') { next(); } else { // 如果用户已经登录,则继续导航 if (token) { next(); } else { // 如果用户没有登录,则跳转到登录页 next('/login'); } } }) // 创建Vue实例并挂载Router new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上述代码中,我们首先定义了两个路由,一个是登录页(Login),一个是仪表盘页(Dashboard)。然后根据用户是否具有Token来控制页面访问权限,在beforeEach导航守卫中进行判断。如果用户访问的是登录页,则直接放行,否则再判断用户是否已经登录。如果用户已经登录,则继续导航到目标页面,否则将用户重定向到登录页。 这样,当页面没有Token时,就会自动跳转到登录页。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值