Vue使用路由守卫，防止直接输入url越权访问

最近在开发Vue+Springboot的前后端分离项目时，为了防止用户没有登录，直接输入网址越权访问登录后的网页，所以打算想个办法拦截，一开始打算在Springboot处写一个拦截器，但由于是前后端分离的模板，就打算在Vue处写个路由拦截器

SpringBoot处的登录逻辑

前后端采用异步传输的方式，这里返回的Result是我自己编写的一个判断类，用以返回前端，前端获取返回的判断类，根据起变量的值进行逻辑判断。

status：默认为true，当controller判断成立时，不进行设置，不成立时设置为false

msg：用来存字符串信息，前端获取后用来给弹出消息赋值

users：用来存登录成功后的用户姓名，前端获取用以存token

@Data
public class Result {
    private Boolean status=true;
    private String msg;
    private String users;

    public String getUsers() {
        return users;
    }

    public void setUsers(String users) {
        this.users = users;
    }

    public Boolean getStatus() {
        return status;
    }

    public void setStatus(Boolean status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

 返回一个判断类

//登录
    @PostMapping("/user/login")
    public Result login(@RequestBody Map<String, String> params){
        Result result = new Result();
        Admin admin =null;
        String username=params.get("username");
        String password=params.get("password");

        admin=goodsService.login(username,password);
        if (admin!=null) {
            result.setMsg("登录成功");
            result.setUsers(username);
        }else {
            result.setStatus(false);
            result.setMsg("登录失败");
        }
        return result;
    }

Vue处的逻辑判断

其中的关键在于这串代码，它将获取来的用户名信息存到SessionStorage中

window.sessionStorage.setItem("token",res.data.users)

submitForm(){
        this.$http.post("http://localhost:8989/user/login",this.ruleForm).then(res=>{
          if (res.data.status){
            this.$message({
              message: '恭喜你,'+res.data.msg,
              type: 'success',
            });
            console.log(res)
            window.sessionStorage.setItem("token",res.data.users)

            this.$router.push("/index");
          }else {
            this.$message.error(res.data.msg);
          }
        });
      }

这时候还需要到index.js文件下进行一些设置，将原来的设置成这样：

//原来的
export default new Router

新的
const router = new Router

设置路由导航，加在index.js的最下面，to代表需要访问的路由地址，from代表从哪个路由跳转而来，next()是放行函数，表示放行路由。

获取先前存储的token,判断是否存在，如果不是经过登录而来的，token就为null,这时候给他返回到登录页面

//导航守卫
router.beforeEach((to,from,next)=>{
  if (to.path==='/login') return next();
  //获取token
  const tokenStr= window.sessionStorage.getItem('token')
  if(!tokenStr) return next('/login')
  next()

})
export  default  router