vue路由登陆权限

实现思路：

路由导航守卫router.beforeEach配合登陆凭证token ，其中router.beforeEach判断页面是否被展示，token判断是否登录。

 

实现方法：

在配置路由规则时，为需要登录才能显示页面的路由规则配置对象里添加meta属性，在页面跳转时，判断跳转后的路由信息中need_login属性真假

为假时（代表此页面无需登录即可访问）: 直接跳转至对应页面；

为真时（代表此页面需登录才可访问）:再判断前端是否有登陆凭证token

若有（代表已登录）则直接跳转至对应页面；

若无（代表未登录）则跳转至登录页面。

 

关键代码:

router->index.js

//配置路由规则
const router = new Router({
  routes: [
      {
         path: '/login',   // 登录页面
         name: 'Login',
         component: Login,
      },
      {
         path:"/tourist",  // 游客页面
         name:" tourist",
         component: Tourist, 
      },
      {
         path:"/myCenter", // 用户页面
         name:"MyCenter",
         component: MyCenter, 
         meta:{
            need_login:true //需要登录
         }
      }
  ]
});
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
 router.beforeEach((to, from, next) => {
      const { need_login = false } = to.meta;
      const { token } = store.state; //从vuex中获取token
      if (need_login && !token) {
        // 如果页面需要登录但用户没有登录跳到登录页面
        const next_page = to.name;
        next({
          name: 'Login',
          params: { 
              redirect_page: next_page,//需要访问的页面路由名称当作参数传递给登陆页面
              },
        });
      } else {
        //不需要登录直接放行
        next();
      }
    });

 

login.vue

//获取用户信息
//在用户登录成功的回调中将后台返回的token通过vuex存储到localStorage
    login () {
      let _this = this;
      if (this.loginForm.username === '' || this.loginForm.password === '') {
          alert('账号或密码不能为空');
      } else {
            this.axios({
              method: 'post',
              url: '/user/login',
              data: _this.loginForm
            }).then(res => {
          console.log(res.data);
          _this.userToken = 'Bearer ' + res.data.data.body.token;
          // 将用户token保存到vuex中
          _this.changeLogin({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('登陆成功');
        }).catch(error => {
          alert('账号或密码错误');
          console.log(error);
        });
      }
    }

 

store->index.js

const store = new Vuex.Store({
  state: {
    // 存储token
    Authorization: localStorage.getItem('Authorization')?localStorage.getItem('Authorization') : ''
  },
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state, user) {
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});