vue 前端守卫 登录验证权限

 

举例子写三个页面

home需要token，login和register页面不需要，直接放行

在routes内加上meta属性标记

 

页面路由加上标志：

import Vue from 'vue';
import VueRouter from 'vue-router'

// 使用路由插件
Vue.use(VueRouter)

// 引入路由
import Login from '@/components/User/Login'
import Register from '@/components/User/register'
import Home from '@/components/Home/Home'
const router = new VueRouter({

        routes:[
            {
                path:"/login",
                component:Login,
                meta:{
                    auth:false
                }
            },
            {
                path:"/register",
                component:Register,
                meta:{
                    auth:false
                }
            },
            {
                path:"/home",
                component:Home,
                meta:{
                    auth:true
                }
            }
        ]

})

auth: true 

下面的路由守卫来判断是否为true，需要验证

false则不需要，直接放行

 

router.beforeEach((to, from, next) => {
    var token = localStorage.getItem("token");
  
    // 需要验证权限的页面
    if (to.meta.auth) {
        // 带有token可进入
        if (token) {
            next();
        }else{
            next("login");
        }
            
      }
    //   非验证页面直接放行
      else{
        next();
      }
    }
)


export default router

 

 

这个只能判断是否带了token，不能判断token是否有效，比如手动在浏览器伪造加token  ，那么路由会认为通过 放行

所以还需要加上请求拦截器才可以。