vue登录权限判断方法

在路由配置里,使用路由的全局导航守卫来判断是否登录:

// 实例化对象
let router = new VueRouter({
  routes
})
// 注册导航守卫(回调函数)
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    // 登录页 不需要判断
    next();
  } 
  //不是去登录页面
  else {
    // 不是去登录页面:判断登录 判断token是否存在即可
    let token = window.sessionStorage.getItem("token");
    if (token) {
      // 登录成功
      // 继续访问
      next();
    } else {
      // 不是去登录页面,也没有登录(判断是否有token)
      // 这里不是Vue实例 无法通过this访问 但是可以访问到Vue构造函数 可以通过原型访问
      Vue.prototype.$message.error('请先登录');
      // 打会登录页 可以使用next 进行路由跳转
      next('/login');
    }
  }
})
// 暴露出去
export default router;
  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue Admin Template是一个基于Vue.js的后台管理模板,它提供了一整套完善的后台管理系统解决方案,包括登录权限控制。 首先,Vue Admin Template默认使用了vue-router来进行路由控制,可以在路由配置中设置哪些页面需要登录才能访问,哪些页面可以直接访问。例如: ```javascript import Vue from 'vue' import Router from 'vue-router' import Login from '@/views/Login' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'home', component: () => import('@/views/Home'), meta: { requiresAuth: true // 需要登录才能访问 } }, { path: '/login', name: 'login', component: Login } ] }) router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!localStorage.getItem('token')) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() } }) export default router ``` 在上面的例子中,Home组件需要登录才能访问,而Login组件不需要登录即可访问。同时,在router.beforeEach中对路由进行拦截,如果用户没有登录则跳转到登录页面。 其次,在登录成功后,可以将token存储到localStorage中,用于在路由拦截时进行判断。例如: ```javascript // 登录成功后保存token localStorage.setItem('token', response.data.token) ``` 最后,在退出登录时,需要清除localStorage中的token。例如: ```javascript // 退出登录时清除token localStorage.removeItem('token') ``` 综上所述,Vue Admin Template可以通过路由控制和localStorage存储token来实现登录权限控制。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值